Example
<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

3.2 molecules.cards Cards

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.

  <div class="card  [modifier class]">
   <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>
Source: components/molecules/cards/_cards.scss, line 1

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

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
<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 136

3.2.2 molecules.cards.card-vertical Card vertical image placement

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

Example
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
<div class="col-sm-4">
  <div class="card ">
    <img 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 124
Example
Comment text

submitted on 01-01-2016



<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
<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.
<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="nav 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 1
Example
<ul class="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
<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.
<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