Styleguide

Card Deck: With Icon 

<section class="py-4 py-lg-5 bg-blue-40">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-12 col-xl-7">
                <div class="row justify-content-center text-center">
                    <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">
                                <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">
                                <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>
            </div>
        </div>
    </div>
</section>
 
<section class="{{class}}">
  <div class="container">
    {{#with container}}
      <div class="{{class}}">
        {{#with column}}
          <div class="{{class}}">
            {{#with cardDeck}}
              <div class="{{class}}">
                {{#each cards}}
                  {{render "@card--with-icon" card}}
                {{/each}}
              </div>
            {{/with}}
          </div>
        {{/with}}
      </div>
    {{/with}}
  </div>
</section>
 
{
  "class": "py-4 py-lg-5 bg-blue-40",
  "container": {
    "class": "row justify-content-center",
    "column": {
      "class": "col-sm-12 col-md-10 col-lg-12 col-xl-7",
      "cardDeck": {
        "class": "row justify-content-center text-center",
        "cards": [
          {
            "card": {
              "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"
                }
              }
            }
          },
          {
            "card": {
              "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"
                }
              }
            }
          },
          {
            "card": {
              "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.