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.
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.
<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>
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!
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<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 136
3.2.2 molecules.cards.card-vertical Card vertical image placement
Makes it possible to render an image before or after the content.
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>
components/molecules/cards/_cards.scss
, line 124
3.3 molecules.carousel Carousel
Carousel code is based on Slick Slider.
<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
<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
<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
<div class="payoff">
<div class="logo">
<span>RIVM. De zorg voor morgen begint vandaag.</span>
</div>
</div>
components/molecules/payoff/_payoff.scss
, line 1