Styleguide

Card: Success Story 

<div class="card text-center m-4 yt-play-teaser w-100 w-md-33">
    <a href="/unternehmen/success-stories/dittrich-eiltransporte" title="Success Story &amp;amp; Video von Dittrich Eiltransporte GmbH" class="text-decoration-none position-relative clickable" target="_self">
        <img src="/STATIC/binary/images/global/people/testimonials/references-video-teaser-dittrich-blur.jpg" data-src="/STATIC/binary/images/global/people/testimonials/references-video-teaser-dittrich.jpg" alt="Dittrich Eiltransporte GmbH, Oliver Stiller" loading="lazy" class="lazy" title="Dittrich Eiltransporte GmbH, Oliver Stiller" width="100%" />
        <noscript>
            <img src="/STATIC/binary/images/global/people/testimonials/references-video-teaser-dittrich.jpg" alt="Dittrich Eiltransporte GmbH, Oliver Stiller" title="Dittrich Eiltransporte GmbH, Oliver Stiller" width="100%" />
        </noscript>
    </a>
    <blockquote class="px-3 h-100">
        <p class="mb-0 mt-3 px-3">"Mit dem System von TIMOCOM sparen wir bis zu 60 Prozent der Zeit bei der Auftragsvergabe. Über das Formular können wir dann alle Daten einfügen und versenden. Wir warten auf keine E-Mails mit irgendwelchen Briefköpfen oder Versicherungsbestätigungen, sondern machen alles gleich online."</p>
        <footer class="blockquote-footer color-cool-gray-120">
            <p class="mb-3">Oliver Stiller<br />Dittrich Eiltransporte GmbH<br />TIMOCOM ID 67066</p>
        </footer>
    </blockquote>
    <a href="/unternehmen/success-stories/dittrich-eiltransporte" title="Success Story &amp;amp; Video von Dittrich Eiltransporte GmbH" class="card-footer bg-gray-20 d-flex align-items-center justify-content-center" target="_self">Success Story &amp; Video &gt;
    </a>
</div>
 
<div class="card text-center m-4 yt-play-teaser w-100 w-md-33">
  {{#with link}}
    <a
      href="{{href}}"
      title="{{title}}"
      class="text-decoration-none position-relative clickable"
      target="_self"
    >
      {{#with image}}
        <img
          src="{{src}}-blur.jpg"
          data-src="{{src}}.jpg"
          alt="{{alt}}"
          loading="lazy"
          class="lazy"
          title="{{title}}"
          width="100%"
        />
        <noscript>
          <img src="{{src}}.jpg" alt="{{alt}}" title="{{title}}" width="100%" />
        </noscript>
      {{/with}}
    </a>
  {{/with}}
  {{#with quote}}
    <blockquote class="px-3 h-100">
      <p class="mb-0 mt-3 px-3">{{{text}}}</p>
      <footer class="blockquote-footer color-cool-gray-120">
        <p class="mb-3">{{{author}}}</p>
      </footer>
    </blockquote>
  {{/with}}
  {{#with link}}
    <a
      href="{{href}}"
      title="{{title}}"
      class="card-footer bg-gray-20 d-flex align-items-center justify-content-center"
      target="_self"
    >{{{text}}}
    </a>
  {{/with}}
</div>
 
{
  "image": {
    "src": "/STATIC/binary/images/press/de-was-ist-smart-logistics-web-900x600px-w500-h.jpg",
    "alt": "Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum"
  },
  "body": {
    "headline": {
      "text": "Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum"
    },
    "link": {
      "href": "https://www.timocom.de/blog/smart-logistics-spart-zeit-und-geld",
      "title": "Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum",
      "text": "Mehr erfahren &gt;",
      "ariaLabel": "Mehr erfahren >"
    }
  },
  "link": {
    "href": "/unternehmen/success-stories/dittrich-eiltransporte",
    "title": "Success Story &amp; Video von Dittrich Eiltransporte GmbH",
    "text": "Success Story &amp; Video &gt;",
    "image": {
      "src": "/STATIC/binary/images/global/people/testimonials/references-video-teaser-dittrich",
      "alt": "Dittrich Eiltransporte GmbH, Oliver Stiller",
      "title": "Dittrich Eiltransporte GmbH, Oliver Stiller"
    }
  },
  "quote": {
    "text": "\"Mit dem System von TIMOCOM sparen wir bis zu 60 Prozent der Zeit bei der Auftragsvergabe. Über das Formular können wir dann alle Daten einfügen und versenden. Wir warten auf keine E-Mails mit irgendwelchen Briefköpfen oder Versicherungsbestätigungen, sondern machen alles gleich online.\"",
    "author": "Oliver Stiller<br />Dittrich Eiltransporte GmbH<br />TIMOCOM ID 67066"
  }
}

No notes defined.