Styleguide

Card Deck: Default 

<section class="mb-4 mb-lg-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-10 col-xl-8">
                <div class="card-deck">
                    <div class="card hover-card mt-3 mb-0 wow animated fadeInLeft">
                        <img 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" class="card-img-top img-fluid" />

                        <div class="card-body">
                            <h3 class="wordbreak card-title h6">Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum</h3>

                            <a href="https://www.timocom.de/blog/smart-logistics-spart-zeit-und-geld" title="Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum" class="mt-3 d-block color-blue stretched-link text-decoration-none" target="_self" aria-label="Mehr erfahren &gt;">Mehr erfahren &gt;
                            </a>
                        </div>
                    </div>
                    <div class="card hover-card mt-3 mb-0 wow animated fadeInLeft">
                        <img 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" class="card-img-top img-fluid" />

                        <div class="card-body">
                            <h3 class="wordbreak card-title h6">Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum</h3>

                            <a href="https://www.timocom.de/blog/smart-logistics-spart-zeit-und-geld" title="Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum" class="mt-3 d-block color-blue stretched-link text-decoration-none" target="_self" aria-label="Mehr erfahren &gt;">Mehr erfahren &gt;
                            </a>
                        </div>
                    </div>
                    <div class="card hover-card mt-3 mb-0 wow animated fadeInLeft">
                        <img 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" class="card-img-top img-fluid" />

                        <div class="card-body">
                            <h3 class="wordbreak card-title h6">Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum</h3>

                            <a href="https://www.timocom.de/blog/smart-logistics-spart-zeit-und-geld" title="Smart Logistics ist stärkster Hebel für Kostenersparnis und Wachstum" class="mt-3 d-block color-blue stretched-link text-decoration-none" target="_self" aria-label="Mehr erfahren &gt;">Mehr erfahren &gt;
                            </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" card merge=true}}
                {{/each}}
              </div>
            {{/with}}
          </div>
        {{/with}}
      </div>
    {{/with}}
  </div>
</section>
 
{
  "class": "mb-4 mb-lg-5",
  "container": {
    "class": "row justify-content-center",
    "column": {
      "class": "col-sm-12 col-md-10 col-lg-10 col-xl-8",
      "cardDeck": {
        "class": "card-deck",
        "cards": [
          {
            "cardClass": ""
          },
          {
            "cardClass": ""
          },
          {
            "cardClass": ""
          }
        ]
      }
    }
  }
}

No notes defined.