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
header

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

.card-primary
Card primary.
header

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

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

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

Markup: components/molecules/cards/cards-horizontal.twig
<div class="container container-spacer singlecard">

    <div class="card  [modifier class]">
        <div class="card-header">header</div>      <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_1.jpg" ></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>
  
</div>
Source: components/molecules/cards/_cards.scss, line 157

2.2.1 molecules.cards.card-horizontal Singlecard: A card without a wrapper

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

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

Examples
Default styling
header

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

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

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

.bg-brand
Primary background color.
header

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

.bg-brand-light
Primary light background color.
header

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

.bg-azure
Azure background color
header

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

.bg-azure-lightest
Azure light background color
header

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

.bg-dark-blue
Dark blue background color
header

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

.bg-dark-blue-lightest
Dark blue light background color
header

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

.bg-gray
Gray background color
header

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

.bg-gray-lightest
Gray light background color
header

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

.bg-white
White background color
header

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

Markup: components/molecules/cards/singlecard.twig
<div class="container container-spacer singlecard">

    <div class="card  [modifier class]">
        <div class="card-header">header</div>      <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_1.jpg" ></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>
  
</div>
Source: components/molecules/cards/_cards.scss, line 193
Markup: components/molecules/cards/card-list.twig
<div class="card-list">
  <a href="#" class="icon-nieuws">
    <article class="card card-item">
      <h2 class="card-header">Apple</h2>
      <div class="card-block">
        <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
      </div>
      <footer class="card-footer">
        <p><small>Published: <time pubdate="pubdate">2009-10-09</time></small></p>
      </footer>
    </article>
  </a>
</div>
Source: components/molecules/cards/_cards.scss, line 232

2.2.3 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 137
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="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