Styleguide

Call To Action Area: Dark Bg 

<section class="py-xl-5 py-4 bg-cool-gray-120 text-white">
    <div class="container">
        <div class="row justify-content-center">
            <div class="text-center wow fadeInUp col-sm-12 col-md-10 col-lg-10 col-xl-7">
                <h2 class="wordbreak h4 mb-2 h-sm-3">Lagerflächen finden oder anbieten mit der Anwendung Lager im <span class='nowrap'>Smart Logistics System</span></h2>
                <a href="/registrieren" title="Lagerflächen finden oder anbieten mit der Anwendung Lager im Smart Logistics System" 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;register in warehouse-call-to-action-area-1&#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;warehouse - url&#x3D;/smart-logistics-system/lager - language&#x3D;de&#x27;});}" class="btn btn-lg btn-highlight my-4" target="_self" role="button">Jetzt kostenlos testen
                </a>
                <p class="text-center text-white h5">Sie haben Fragen? Wir helfen Ihnen gerne weiter: </p>
                <address class="lead">
                    <p class="m-0">
                        <i class="icon-solid-phone mr-1 icon-sm"></i>

                        <a class="text-white text-decoration-underline pl-2" href="tel:+4921188268826" onclick="window.dataLayer.push({&#x27;event&#x27;: &#x27;call_tracking&#x27;, &#x27;event_category&#x27;: &#x27;contact_website&#x27;, &#x27;event_action&#x27;: &#x27;phone_number:+4921188268826-DE &#x27;, &#x27;event_label&#x27;: &#x27;pagetag&#x3D;transport-inquiry - url&#x3D;/smart-logistics-system/transportanfragen - language&#x3D;de&#x27;});">
                            <span class="no-wrap">+49 211 88 26 88 26</span>
                        </a>
                    </p>
                    <p class="m-0">
                        <i class="icon-solid-envelope mr-1 icon-sm"></i>

                        <a class="text-white text-decoration-underline pl-2" href="mailto:info.de@timocom.com" onclick="window.dataLayer.push({&#x27;event&#x27;: &#x27;call_tracking&#x27;, &#x27;event_category&#x27;: &#x27;contact_website&#x27;, &#x27;event_action&#x27;: &#x27;phone_number:+4921188268826-DE &#x27;, &#x27;event_label&#x27;: &#x27;pagetag&#x3D;transport-inquiry - url&#x3D;/smart-logistics-system/transportanfragen - language&#x3D;de&#x27;});">
                            <span class="no-wrap">info.de@timocom.com</span>
                        </a>
                    </p>
                </address>
            </div>
        </div>
    </div>
</section>
 
<section class="{{sectionClass}}">
  <div class="container">
    <div class="row justify-content-center">
      <div
        class="text-center wow fadeInUp col-sm-12 col-md-10 col-lg-10 col-xl-7"
      >
        {{#with headline}}
          <h2 class="{{class}}">{{{text}}}</h2>
        {{/with}}
        {{#with link}}
          <a
            href="{{href}}"
            title="{{title}}"
            onclick="{{onClick}}"
            class="{{class}}"
            target="_self"
            role="button"
          >{{{text}}}
          </a>
        {{/with}}
        {{#each paragraph}}
          <p class="{{class}}">{{{text}}}</p>
        {{/each}}
        {{#if address}}
          <address class="lead">
            {{#with address}}
              {{#each item}}
                <p class="m-0">
                  <i class="{{icon.class}}"></i>

                  {{#with link}}
                    <a class="{{class}}" href="{{href}}" onclick="{{onClick}}">
                      <span class="no-wrap">{{{text}}}</span>
                    </a>
                  {{/with}}
                </p>
              {{/each}}
            {{/with}}
          </address>
        {{/if}}
      </div>
    </div>
  </div>
</section>
 
{
  "sectionClass": "py-xl-5 py-4 bg-cool-gray-120 text-white",
  "headline": {
    "class": "wordbreak h4 mb-2 h-sm-3",
    "text": "Lagerflächen finden oder anbieten mit der Anwendung Lager im <span class='nowrap'>Smart Logistics System</span>"
  },
  "link": {
    "href": "/registrieren",
    "title": "Lagerflächen finden oder anbieten mit der Anwendung Lager im Smart Logistics System",
    "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_action','event_category': 'click_button','event_action': 'register in warehouse-call-to-action-area-1','event_label':'pageTag=warehouse - url=/smart-logistics-system/lager - language=de'});}",
    "class": "btn btn-lg btn-highlight my-4",
    "text": "Jetzt kostenlos testen"
  },
  "paragraph": [
    {
      "class": "text-center text-white h5",
      "text": "Sie haben Fragen? Wir helfen Ihnen gerne weiter: "
    }
  ],
  "address": {
    "item": [
      {
        "icon": {
          "class": "icon-solid-phone mr-1 icon-sm"
        },
        "link": {
          "class": "text-white text-decoration-underline pl-2",
          "href": "tel:+4921188268826",
          "onClick": "window.dataLayer.push({'event': 'call_tracking', 'event_category': 'contact_website', 'event_action': 'phone_number:+4921188268826-DE ', 'event_label': 'pagetag=transport-inquiry - url=/smart-logistics-system/transportanfragen - language=de'});",
          "text": "+49 211 88 26 88 26"
        }
      },
      {
        "icon": {
          "class": "icon-solid-envelope mr-1 icon-sm"
        },
        "link": {
          "class": "text-white text-decoration-underline pl-2",
          "href": "mailto:info.de@timocom.com",
          "onClick": "window.dataLayer.push({'event': 'call_tracking', 'event_category': 'contact_website', 'event_action': 'phone_number:+4921188268826-DE ', 'event_label': 'pagetag=transport-inquiry - url=/smart-logistics-system/transportanfragen - language=de'});",
          "text": "info.de@timocom.com"
        }
      }
    ]
  }
}

No notes defined.