Styleguide

Page Header: Image 

<section id="warehouse-header">
    <header class="page-header">
        <div class="color-white bg-blue">
            <picture>
                <source media="(min-width: 1200px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg" type="image/jpeg" />
                <source media="(min-width: 960px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-lg.jpg" type="image/jpeg" />
                <source media="(min-width: 767px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-md.jpg" type="image/jpeg" />
                <source media="(min-width: 200px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-sm.jpg" type="image/jpeg" />

                <img src="/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg" alt="Lagerflächen suchen und anbieten – europaweit" class="img-fluid" width="100%" />
            </picture>

            <div class="position-sm-relative position-md-absolute d-flex flex-column h-100 w-100 align-items-center justify-content-center text-white" style="top: 0; left: 0">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="bg-blue-blur col-sm-12 col-md-6 col-lg-6 col-xl-6">
                            <h1 class="wordbreak h-sm-2 mt-4 mb-3 animated fadeInUp">
                                Leichter geht’s nicht:<br />Passende Lagerflächen suchen und anbieten – europaweit
                            </h1>

                            <div class="d-flex align-items-center pb-2 animated fadeInUp">
                                <i class="icon icon-solid-check-circle icon-lg"></i>

                                <p class="mb-0 ml-2">Nutzen Sie Preisangebotsauskünfte von Geschäftspartnern zu Tagespreisangaben in Echtzeit</p>
                            </div>
                            <div class="d-flex align-items-center pb-2 animated fadeInUp">
                                <i class="icon icon-solid-check-circle icon-lg"></i>

                                <p class="mb-0 ml-2">Nutzen Sie Preisangebotsauskünfte von Geschäftspartnern zu Tagespreisangaben in Echtzeit</p>
                            </div>
                            <a href="/registrieren" title="Registrieren Sie sich jetzt und testen Sie das System von TIMOCOM." onclick="link.onClick" class="text-decoration-none btn btn-highlight mb-4 animated fadeInUp" target="_self">Jetzt kostenlos testen
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </header>
</section>
 
<section id="warehouse-header">
  <header class="page-header">
    <div class="color-white bg-blue">
      {{render "@picture"}}

      <div
        class="position-sm-relative position-md-absolute d-flex flex-column h-100 w-100 align-items-center justify-content-center text-white"
        style="top: 0; left: 0"
      >
        <div class="container">
          <div class="row justify-content-end">
            <div class="bg-blue-blur col-sm-12 col-md-6 col-lg-6 col-xl-6">
              <h1 class="wordbreak h-sm-2 mt-4 mb-3 animated fadeInUp">
                {{{headline.text}}}
              </h1>

              {{#if checkList}}
                {{#each checkList}}
                  <div class="d-flex align-items-center pb-2 animated fadeInUp">
                    <i class="icon icon-solid-check-circle icon-lg"></i>

                    <p class="mb-0 ml-2">{{text}}</p>
                  </div>
                {{/each}}
              {{/if}}
              <a
                href="{{link.href}}"
                title="{{link.title}}"
                onclick="link.onClick"
                class="text-decoration-none btn btn-highlight mb-4 animated fadeInUp"
                target="_self"
              >{{link.text}}
              </a>
            </div>
          </div>
        </div>
        {{#if scrollDown}}
          <a
            href="#intro-transport_inquiry"
            onclick="if(window.dataLayer){window.dataLayer.push({'event': 'call_to_interact','event_category': 'click_button','event_action': '#intro-transport_inquiry in freight-header','event_label':'pageTag=transport-inquiry - url=/smart-logistics-system/transportanfragen - language=de'});}"
            class="btn-scrolldown position-relative mt-4 pt-5 d-none d-lg-block wow fadeInUp btn"
            role="button"
            data-offset="40"
          ><span> </span> </a>{{/if}}
      </div>
    </div>
  </header>
</section>
 
{
  "scrollDown": false,
  "headline": {
    "text": "Leichter geht’s nicht:<br />Passende Lagerflächen suchen und anbieten – europaweit"
  },
  "checkList": [
    {
      "text": "Nutzen Sie Preisangebotsauskünfte von Geschäftspartnern zu Tagespreisangaben in Echtzeit"
    },
    {
      "text": "Nutzen Sie Preisangebotsauskünfte von Geschäftspartnern zu Tagespreisangaben in Echtzeit"
    }
  ],
  "link": {
    "href": "/registrieren",
    "title": "Registrieren Sie sich jetzt und testen Sie das System von TIMOCOM.",
    "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_action','event_category': 'click_button','event_action': 'register in warehouse-header','event_label':'pageTag=warehouse - url=/smart-logistics-system/lager - language=de'});}",
    "text": "Jetzt kostenlos testen"
  }
}

No notes defined.