2.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.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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>
components/molecules/cards/_cards.scss
, line 1
2.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!

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

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>
components/molecules/cards/_cards.scss
, line 157
2.2.1 molecules.cards.card-horizontal Singlecard: A card without a wrapper
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!

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

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

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

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

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

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

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

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

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

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>
components/molecules/cards/_cards.scss
, line 193
2.2.2 molecules.cards.card-list Card List
Makes a vertical list of cards.
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>
components/molecules/cards/_cards.scss
, line 232
2.2.3 molecules.cards.card-vertical Text alignment
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
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>
components/molecules/cards/_cards.scss
, line 137
2.3 molecules.carousel Carousel
Carousel code is based on Slick Slider.
Markup: components/molecules/carousel/carousel.twig
<div id="priority" class="carousel">
<figure class="carousel-slide ">
<a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 1" tabindex="-1">
<img src="http://placehold.it/1200x300/f7f7f7/000000" />
</a>
<div class="slide-nav-link">
<button class="sr-only sr-only-focusable">Go to slide: Slide 1</button><h3 class="slide-title">Slide 1</h3>
<a href="#kssref-molecules-carousel" class="slide-content" title="Slide 1">Naar het buitenland? Lees eerst het reisadvies voor het land van uw bestemming.</a>
</div>
</figure>
<figure class="carousel-slide ">
<a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 2" tabindex="-1">
<img src="http://placehold.it/1200x300" />
</a>
<div class="slide-nav-link">
<button class="sr-only sr-only-focusable">Go to slide: Slide 2</button><h3 class="slide-title">Slide 2</h3>
<a href="#kssref-molecules-carousel" class="slide-content" title="Slide 2">Slide 2 content zin met wat tekst</a>
</div>
</figure>
<figure class="carousel-slide ">
<a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 3" tabindex="-1">
<img src="http://placehold.it/1200x300/f7f7f7/000000" />
</a>
<div class="slide-nav-link">
<button class="sr-only sr-only-focusable">Go to slide: Slide 3</button><h3 class="slide-title">Slide 3</h3>
<a href="#kssref-molecules-carousel" class="slide-content" title="Slide 3">Slide 3 content zin met wat tekst</a>
</div>
</figure>
<figure class="carousel-slide ">
<a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 4" tabindex="-1">
<img src="http://placehold.it/1200x300" />
</a>
<div class="slide-nav-link">
<button class="sr-only sr-only-focusable">Go to slide: Slide 4</button><h3 class="slide-title">Slide 4</h3>
<a href="#kssref-molecules-carousel" class="slide-content" title="Slide 4">Slide 4 content zin met wat tekst</a>
</div>
</figure>
</div>
components/molecules/carousel/_carousel.scss
, line 1
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">
components/molecules/comments/_comments.scss
, line 1
- 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>
components/molecules/list-group/_list-group.scss
, line 1
Markup: components/molecules/payoff/payoff.twig
<div class="payoff">
<div class="logo">
<span>RIVM. De zorg voor morgen begint vandaag.</span>
</div>
</div>
components/molecules/payoff/_payoff.scss
, line 1