Styleguide

Card: With Icon 

<div class="mt-3 mb-3 d-flex col-sm-12 col-md-6 col-lg-4 col-xl-4">
    <div class="card hover-card mo p-4 wow fadeInLeft bg-white">
        <div class="d-flex justify-content-center">
            <i class="icon icon-light-transport-request icon-xl text-primary"></i>
        </div>
        <h3 class="wordbreak text-center mt-2 h5">Transportanfragen</h3>

        <p>Fragen Sie mit nur einem Klick bei Ihren bekannten und geprüften Dienstleistern Verfügbarkeiten und Transportpreise an.</p>
        <a id="#" href="/smart-logistics-system/transportanfragen" title="Jetzt starten" class="stretched-link text-decoration-none" target="_self" role="link" aria-label="Mehr erfahren"><span>Mehr erfahren &gt;</span>
            <i class="icon icon-regular-chevron-right icon-sm"></i>
        </a>
    </div>
</div>
 
<div class="mt-3 mb-3 d-flex col-sm-12 col-md-6 col-lg-4 col-xl-4">
  <div class="card hover-card mo p-4 wow fadeInLeft bg-white">
    <div class="d-flex justify-content-center">
      {{render "@icon" icon}}
    </div>
    {{render "@headline" headline}}
    {{#each paragraphs}}
      <p>{{this}}</p>
    {{/each}}
    {{#with link}}
      <a
        id="{{id}}"
        href="{{href}}"
        title="{{title}}"
        class="stretched-link text-decoration-none"
        target="_self"
        role="link"
        aria-label="{{ariaLabel}}"
      ><span>{{{text}}}</span>
        {{render "@icon" icon}}
      </a>
    {{/with}}
  </div>
</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 >"
    }
  },
  "icon": {
    "class": "icon icon-light-transport-request icon-xl text-primary"
  },
  "headline": {
    "class": "wordbreak text-center mt-2 h5",
    "text": "Transportanfragen",
    "h3": true
  },
  "paragraphs": [
    "Fragen Sie mit nur einem Klick bei Ihren bekannten und geprüften Dienstleistern Verfügbarkeiten und Transportpreise an."
  ],
  "link": {
    "id": "#",
    "href": "/smart-logistics-system/transportanfragen",
    "title": "Jetzt starten",
    "ariaLabel": "Mehr erfahren",
    "text": "Mehr erfahren &gt;",
    "icon": {
      "class": "icon icon-regular-chevron-right icon-sm"
    }
  }
}

No notes defined.