2.2.3 molecules.cards.header&footer Header and Footer
Toggle example guides Toggle HTML markup
Add an optional header and/or footer within a card. The header default background color is the primary brand color.
Examples
Default styling
Ongezond
With supporting text below as a natural lead-in to additional content.
Footer tekst
.card-button
Changes the interaction when a card is clickable.
Ongezond
With supporting text below as a natural lead-in to additional content.
Footer tekst
Markup: components/molecules/cards/cards-header-footer.twig
<div class="col-sm-4">
<div class="card [modifier class] ">
<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 128