Styleguide

Standard Width 2 Col Container: Success Story 

<section class="pb-lg-5 pb-4 pt-4 bg-blue-10">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-12 col-lg-10 col-xl-7">
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-md-5 col-lg-6 col-xl-6">
                        <div class="position-relative h-100">
                            <div class="position-absolute text-white" style="top: 0; max-width: 437px">
                                <div class="p-3 p-md-4 wow fadeIn">
                                    <blockquote class="h4">„Die Lagerbörse von TIMOCOM war für uns ein echter Glücksfall“</blockquote>
                                    <p>Wie ein Spediteur aus Bayern per Mausklick ein neues Lager fand.</p>
                                </div>
                            </div>

                            <img src="/STATIC/binary/images/global/success-stories/de-timocom-success-story-spedition-gematrans-04.jpg" data-src="/STATIC/binary/images/global/success-stories/de-timocom-success-story-spedition-gematrans-04.jpg" alt="Mit wenigen Klicks zur neuen Lagerfläche: Unsere Kunden berichten. Wie unser Kunde Gematrans aus Nürnberg erfolgreich im Handumdrehen zu neuen Lagerflächen kam." loading="lazy" class="img-fluid lazy loaded" data-was-processed="true" />
                            <noscript>
                                <img src="/STATIC/binary/images/global/success-stories/de-timocom-success-story-spedition-gematrans-04.jpg" alt="Mit wenigen Klicks zur neuen Lagerfläche: Unsere Kunden berichten. Wie unser Kunde Gematrans aus Nürnberg erfolgreich im Handumdrehen zu neuen Lagerflächen kam." class="img-fluid" />
                            </noscript>

                            <a href="/unternehmen/success-stories/spedition-gematrans" title="Success Story der Spedition Gematrans lesen" class="stretched-link" target="_self" role="link">
                            </a>
                        </div>
                    </div>
                    <div class="mt-3 col-sm-12 col-md-7 col-lg-6 col-xl-6">
                        <p>Die Spedition Gematrans aus Nürnberg stand vor einer Herausforderung: Nach 30 Jahren an ein- und demselben Lagerstandort musste sie <strong>innerhalb kürzester Zeit neue Lagerfläche finden</strong>. Das Logistik- und Transport-Unternehmen mit täglichem Ladungsverkehr von und nach Schweden, Norwegen, Dänemark und Finnland musste bei laufendem Tagesgeschäft und mit geringem Aufwand schnell eine Lösung finden.</p>
                        <a href="/unternehmen/success-stories/spedition-gematrans" title="Success Story der Spedition Gematrans lesen" 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;spedition-gematrans in warehouse-success-story-area&#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;warehouse - url&#x3D;/smart-logistics-system/lager - language&#x3D;de&#x27;});}" class="btn-primary btn" target="_self" role="button">Success Story lesen
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="{{class}}">
  <div class="container">
    {{#with container}}
      <div class="row justify-content-center">
        <div class="{{class}}">
          <div class="row justify-content-center">
            {{#with column1}}
              <div class="{{class}}">{{render "@image-blockquote"}}</div>
            {{/with}}
            {{#with column2}}
              <div class="{{class}}">{{render "@teaser-text"}}</div>
            {{/with}}
          </div>
        </div>
      </div>
    {{/with}}
  </div>
</section>
 
{
  "class": "pb-lg-5 pb-4 pt-4 bg-blue-10",
  "container": {
    "class": "col-sm-12 col-md-12 col-lg-10 col-xl-7",
    "column1": {
      "class": "col-sm-12 col-md-5 col-lg-6 col-xl-6"
    },
    "column2": {
      "class": "mt-3 col-sm-12 col-md-7 col-lg-6 col-xl-6"
    }
  }
}

No notes defined.