2.2.2 molecules.cards.card-vertical Text alignment

Toggle example guides Toggle HTML markup

The text in a cart header, content and footer can be aligned in other direction.

.text-center - Card with center aligned text.

Style guide: molecules.cards.header&footer-aligned Card vertical image placement

Makes it possible to render an image before or after the content.

Markup: cards-img-top.twig

Example

Ongezond

With supporting text below as a natural lead-in to additional content.

Markup: components/molecules/cards/cards-header-footer.twig
<div class="col-sm-4">
    <div class="card   ">
    <h2 class="card-header">Ongezond</h2>    <div class="card-content">
    <div class="card-media"></div>    <div class="card-body ">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
  </div>
      <div class="card-footer">
          Footer tekst
      </div>
  </div>
</div>
Source: components/molecules/cards/_cards.scss, line 153