Government logo | to homepage
Bootstrap Rijkhuisstijl Style Guide
  • Overview
  • 1 atoms
    • 1.1 Buttons
    • 1.2 Form elements
    • 1.3 HTML5 Elements; Grouping content
    • 1.3.1 Block quotes
    • 1.3.2 atoms.grouping.lists
    • 1.4 Icons
    • 1.5 Pagination
    • 1.6 Tables
  • 2 molecules
    • 2.1 Breadcrumb
    • 2.2 Cards
    • 2.2.1 Card horizontal image placement
    • 2.2.2 Header and Footer
    • 2.3 Carousel
    • 2.4 Comments styling
    • 2.5 List group
    • 2.6 Branded tabs menu
    • 2.7 Vertical navigation
    • 2.8 Payoff
    • 2.9 Skipnav
  • 3 organisms
    • 3.1 Header
    • 3.1.1 Header with background image
    • 3.2 Card Deck, vertical cards
    • 3.2.1 Card Deck, horizontal cards with image left
    • 3.2.2 Card Deck, horizontal cards with image right
    • 3.3 Footer

2.2.2 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 114