Styleguide

App Store Links 

<section class="py-5 bg-gray-400">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
                <div class="row">
                    <div class="col-12">
                        <div class="card my-4">
                            <div class="card-header">
                                <p class="lead">Sie wollen jederzeit und überall die aktuelle Marktlage im europäischen Straßen-Transportsektor abrufen können? Dann laden Sie sich gratis unsere Transportbarometer-App herunter.</p>
                            </div>
                            <div class="card-body">
                                <ul class="list-group d-flex flex-row justify-content-center">
                                    <li class="list-group-item border-0 py-3">
                                        <a target="_blank" rel="noreferrer" onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_action&#x27;, &#x27;event_category&#x27;: &#x27;click_button&#x27;, &#x27;event_action&#x27;: &#x27;mobile appButton to iOS app&#x27;, &#x27;event_label&#x27;:&#x27;/services/transportbarometer - language&#x3D;de&#x27;});}" href="https://itunes.apple.com/de/app/timocom-transportbarometer/id395892745?mt&#x3D;8" title="Link zum App-Store" class="text-center">
                                            <img class="img-fluid" alt="Logo iPhoneApp" src="/WWW/themes/main/images/appstores/IPhoneApp.png" title="Link zur iPhoneApp" width="100%" />
                                        </a>
                                    </li>
                                    <li class="list-group-item border-0 py-3">
                                        <a target="_blank" rel="noreferrer" onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_action&#x27;, &#x27;event_category&#x27;: &#x27;click_button&#x27;, &#x27;event_action&#x27;: &#x27;mobile appButton to AndroidOS app&#x27;, &#x27;event_label&#x27;:&#x27;/services/transportbarometer - language&#x3D;de&#x27;});}" href="https://play.google.com/store/apps/details?id&#x3D;com.timocom.transportbarometerlite&amp;amp;hl&#x3D;de" title="Link zu Google Play" class="text-center">
                                            <img class="img-fluid" alt="Logo Google Play" src="/WWW/themes/main/images/appstores/Google-Play.png" title="Link zur IPhoneApp" width="100%" />
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="py-5 bg-gray-400">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
        <div class="row">
          <div class="col-12">
            <div class="card my-4">
              <div class="card-header">
                <p class="lead">{{lead}}</p>
              </div>
              <div class="card-body">
                <ul class="list-group d-flex flex-row justify-content-center">
                  {{#each item}}
                    <li class="list-group-item border-0 py-3">
                      {{#with link}}
                        <a
                          target="_blank"
                          rel="noreferrer"
                          onclick="{{onClick}}"
                          href="{{href}}"
                          title="{{title}}"
                          class="text-center"
                        >
                          {{#with image}}
                            <img
                              class="img-fluid"
                              alt="{{alt}}"
                              src="{{src}}"
                              title="{{title}}"
                              width="100%"
                            />
                          {{/with}}
                        </a>
                      {{/with}}
                    </li>
                  {{/each}}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
 
{
  "lead": "Sie wollen jederzeit und überall die aktuelle Marktlage im europäischen Straßen-Transportsektor abrufen können? Dann laden Sie sich gratis unsere Transportbarometer-App herunter.",
  "item": [
    {
      "link": {
        "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_action', 'event_category': 'click_button', 'event_action': 'mobile appButton to iOS app', 'event_label':'/services/transportbarometer - language=de'});}",
        "href": "https://itunes.apple.com/de/app/timocom-transportbarometer/id395892745?mt=8",
        "title": "Link zum App-Store",
        "image": {
          "alt": "Logo iPhoneApp",
          "src": "/WWW/themes/main/images/appstores/IPhoneApp.png",
          "title": "Link zur iPhoneApp"
        }
      }
    },
    {
      "link": {
        "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_action', 'event_category': 'click_button', 'event_action': 'mobile appButton to AndroidOS app', 'event_label':'/services/transportbarometer - language=de'});}",
        "href": "https://play.google.com/store/apps/details?id=com.timocom.transportbarometerlite&amp;hl=de",
        "title": "Link zu Google Play",
        "image": {
          "alt": "Logo Google Play",
          "src": "/WWW/themes/main/images/appstores/Google-Play.png",
          "title": "Link zur IPhoneApp"
        }
      }
    }
  ]
}
  • Handle: @app-store-links
  • Preview:
  • Filesystem Path: components/sections/app-store-links/app-store-links.hbs

No notes defined.