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!
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
LinkTitle
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>
components/molecules/cards/_cards.scss
, line 169
2.2.2 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 149
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