Styleguide

Shortcuts: Icon Button 

<nav class="bg-white py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="d-sm-block d-md-flex text-center justify-content-between col-sm-12 col-lg-10">
                <div class="p-4 py-md-0">
                    <img src="/STATIC/binary/images/global/value-added-services/timocom-icpn-api-blue.svg" alt="Icon: TIMOCOM-Schnittstellen" class="img-fluide" title="TIMOCOM-Schnittstellen" width="120" />
                    <p class="py-1">
                        Direkt vernetzt als Schnittstellen-Partner
                    </p>
                    <a href="/smart-logistics-system/schnittstellen" title="Jetzt informieren" onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_interact&#x27;,&#x27;event_category&#x27;: &#x27;click_button&#x27;,&#x27;event_action&#x27;: &#x27;interfaces in &#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;vas-hp - url&#x3D;/services/mehrwertdienste - language&#x3D;de&#x27;});}" class="btn-primary btn" target="_self" role="button">Jetzt informieren
                    </a>
                </div>
                <div class="p-4 py-md-0">
                    <img src="/STATIC/binary/images/global/value-added-services/timocom-icon-company-blue.svg" alt="Icon: Unternehmen" class="img-fluide" title="TIMOCOM – das Unternehmen" width="120" />
                    <p class="py-1">
                        Sie kennen TIMOCOM noch nicht?
                    </p>
                    <a href="/unternehmen/wir-über-uns" title="Zum Unternehmen" onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_interact&#x27;,&#x27;event_category&#x27;: &#x27;click_button&#x27;,&#x27;event_action&#x27;: &#x27;timocom-about-us in &#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;vas-hp - url&#x3D;/services/mehrwertdienste - language&#x3D;de&#x27;});}" class="btn-primary btn" target="_self" role="button">Zum Unternehmen
                    </a>
                </div>
                <div class="p-4 py-md-0">
                    <img src="/STATIC/binary/images/global/value-added-services/timocom-icon-smart-logistics-system.svg" alt="Logo: Smart Logistics System" class="img-fluide" title="Das erste Smart Logistics System für Europa" width="120" />
                    <p class="py-1">
                        Das erste Smart Logistics System für Europa
                    </p>
                    <a href="/smart-logistics-system" title="Mehr erfahren" onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_interact&#x27;,&#x27;event_category&#x27;: &#x27;click_button&#x27;,&#x27;event_action&#x27;: &#x27;smartlogisticsystem in &#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;vas-hp - url&#x3D;/services/mehrwertdienste - language&#x3D;de&#x27;});}" class="btn-primary btn" target="_self" role="button">Mehr erfahren
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
 
<nav class="bg-white py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div
        class="d-sm-block d-md-flex text-center justify-content-between col-sm-12 col-lg-10"
      >
        {{#each item}}
          <div class="p-4 py-md-0">
            {{#with image}}
              <img
                src="{{src}}"
                alt="{{alt}}"
                class="img-fluide"
                title="{{title}}"
                width="{{width}}"
              />
            {{/with}}
            <p class="py-1">
              {{{text}}}
            </p>
            {{#with link}}
              <a
                href="{{href}}"
                title="{{title}}"
                onclick="{{onClick}}"
                class="btn-primary btn"
                target="_self"
                role="button"
              >{{{text}}}
              </a>
            {{/with}}
          </div>
        {{/each}}
      </div>
    </div>
  </div>
</nav>
 
{
  "item": [
    {
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-icpn-api-blue.svg",
        "alt": "Icon: TIMOCOM-Schnittstellen",
        "title": "TIMOCOM-Schnittstellen",
        "width": "120"
      },
      "text": "Direkt vernetzt als Schnittstellen-Partner",
      "link": {
        "href": "/smart-logistics-system/schnittstellen",
        "title": "Jetzt informieren",
        "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_interact','event_category': 'click_button','event_action': 'interfaces in ','event_label':'pageTag=vas-hp - url=/services/mehrwertdienste - language=de'});}",
        "text": "Jetzt informieren"
      }
    },
    {
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-icon-company-blue.svg",
        "alt": "Icon: Unternehmen",
        "title": "TIMOCOM – das Unternehmen",
        "width": "120"
      },
      "text": "Sie kennen TIMOCOM noch nicht?",
      "link": {
        "href": "/unternehmen/wir-über-uns",
        "title": "Zum Unternehmen",
        "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_interact','event_category': 'click_button','event_action': 'timocom-about-us in ','event_label':'pageTag=vas-hp - url=/services/mehrwertdienste - language=de'});}",
        "text": "Zum Unternehmen"
      }
    },
    {
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-icon-smart-logistics-system.svg",
        "alt": "Logo: Smart Logistics System",
        "title": "Das erste Smart Logistics System für Europa",
        "width": "120"
      },
      "text": "Das erste Smart Logistics System für Europa",
      "link": {
        "href": "/smart-logistics-system",
        "title": "Mehr erfahren",
        "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_interact','event_category': 'click_button','event_action': 'smartlogisticsystem in ','event_label':'pageTag=vas-hp - url=/services/mehrwertdienste - language=de'});}",
        "text": "Mehr erfahren"
      }
    }
  ]
}

No notes defined.