Example
Markup: components/molecules/breadcrumb/breadcrumb.twig
<ul class="breadcrumb ">
      <li class="breadcrumb-item">
              <a href="#">Home</a>
          </li>
      <li class="breadcrumb-item">
              <a href="#">Level 1</a>
          </li>
      <li class="breadcrumb-item">
              <a href="#">Level 2</a>
          </li>
      <li class="breadcrumb-item">
              Current item
          </li>
  </ul>
Source: components/molecules/breadcrumb/_breadcrumb.scss, line 1

2.2 molecules.cards Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A card is a flexible and extensible content container/block. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Examples
Default styling

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

.card-primary
Changes background to primary color.

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

.card-success
Changes background to success color.

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

.card-info
Changes background to info color.

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

.card-warning
Changes background to warning color.

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

.card-danger
Changes background to danger color.

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

.card-nobg
A card without background color.

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

.bg-white
Changes background to a white color.

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

.card-button
Changes the interaction when a card is clickable.

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

Markup: components/molecules/cards/cards.twig
  <div class="card  [modifier class] ">
  <div class="card-content">
    <div class="card-media"></div>    <div class="card-block">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
  </div>
    </div>
Source: components/molecules/cards/_cards.scss, line 1

2.2.1 molecules.cards.card-horizontal Card horizontal image placement

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Makes it possible to render the content of a card horizontal. An image is placed next to the text. Only for tablet and bigger!

Examples
Default styling
Card image cap

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Link
.card-primary
Card primary.
Card image cap

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Link
.card-button
Changes the interaction when a card is clickable.
Card image cap

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Link
Markup: components/molecules/cards/cards-horizontal.twig
<div class="col-sm-6">
  <div class="card card-horizontal [modifier class]">
    <img class="[modifier class]" src="http://placehold.it/400x200" alt="Card image cap ">
    <div class="card-block ">
        <h4 class="card-title ">Title</h4>
        <p class="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="# " class="card-link ">Link</a>
    </div>
  </div>
</div>
Source: components/molecules/cards/_cards.scss, line 169

2.2.2 molecules.cards.card-vertical Text alignment

Toggle full screen Open in new window 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-block">
              <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 149
Example
Comment text

submitted on 01-01-2016


Markup: components/molecules/comments/comments.twig

<article class="js-comment">
  
  <mark class="hidden" data-comment-timestamp=""></mark>

  <div>
    
    Comment text
  </div>

  <footer>
    
    <p>submitted on 01-01-2016</p>

    
    
  </footer>

</article>
<hr class="sr-only">
Source: components/molecules/comments/_comments.scss, line 1
Example
  • List item 1
  • List item 2
  • List item 3
Markup: components/molecules/list-group/list-group.twig
<ul class="list-group">
    <li class="list-group-item active">List item 1</li>
    <li class="list-group-item ">List item 2</li>
    <li class="list-group-item ">List item 3</li>
</ul>
Source: components/molecules/list-group/_list-group.scss, line 1
Examples
Default styling
.navbar-branded
Branded navbar.
.navbar-branded-light
Branded navbar light.
Markup: components/molecules/navigation/nav.twig
<div class="navbar navbar-full [modifier class]">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon"></span> Menu
</button>
  <div class="collapse navbar-toggleable-md container" id="navbarResponsive">
    <ul class="navbar-nav">
                      <li class="nav-item">
                      <a class="nav-link" href="#">List item 1</a>
                  </li>
                      <li class="nav-item">
                      <a class="nav-link" href="#">List item 2</a>
                  </li>
                      <li class="nav-item">
                      <a class="nav-link" href="#">List item 3</a>
                  </li>
          </ul>
  </div>
</div>
Source: components/molecules/navigation/_nav.scss, line 10
Example
Markup: components/molecules/navigation/nav-vertical.twig
<ul class="navbar-nav nav-vertical">
          <li class="nav-item">
              <a class="nav-link active" href="#" data-toggle="tooltip" data-placement="left" title="Subvraag 1"></a>
          </li>
          <li class="nav-item">
              <a class="nav-link " href="#" data-toggle="tooltip" data-placement="left" title="Subvraag 2"></a>
          </li>
          <li class="nav-item">
              <a class="nav-link " href="#" data-toggle="tooltip" data-placement="left" title="Subvraag 3"></a>
          </li>
  </ul>
Source: components/molecules/navigation/_nav-vertical.scss, line 1
Example
Markup: components/molecules/payoff/payoff.twig
<div class="payoff">
  <div class="logo">
          <span>RIVM. De zorg voor morgen begint vandaag.</span>
      </div>
</div>
Source: components/molecules/payoff/_payoff.scss, line 1
Examples
Default styling
.skipnav
Use this class to style the skipnav.
Markup: components/molecules/navigation/skipnav.twig
<nav id="skipnav" class="skipnav list-group">
  <a href="#navigation" class="sr-only sr-only-focusable list-group-item list-group-item-info">Skip to navigation</a>
  <a href="#maincontent" class="sr-only sr-only-focusable list-group-item list-group-item-info">Skip to main content</a>
</nav>
Source: components/molecules/navigation/_skipnav.scss, line 1