3.1 organisms.header Header
Header organism. Added at every page at the top.
Markup: components/organisms/header/header.twig
<header id="header" class="header ">
<div class="logo">
<a href=""> <img src="kss-assets/img/basislogo.svg" width="44" height="77" alt="Home" class="logo-image" />
</a> <span class="wordmark">
<span class="sender ">Rijksinstituut voor Volksgezondheid en Milieu</span>
<span class="secondary-sender ">Ministerie van Volksgezondheid, Welzijn en Sport</span>
</span>
</div>
</header>
components/organisms/header/_header.scss
, line 1
Markup: components/organisms/header/header-img.twig
<header id="header" class="header with-bg-image bg-brand bg-lightest">
<div class="logo">
<a href=""> <img src="kss-assets/img/basislogo.svg" width="44" height="77" alt="Home" class="logo-image" />
</a> <span class="wordmark">
<span class="sender ">Rijksinstituut voor Volksgezondheid en Milieu</span>
<span class="secondary-sender ">Ministerie van Volksgezondheid, Welzijn en Sport</span>
</span>
</div>
<picture class="header-media col-sm-12">
<img src="kss-assets/img/placeholder_1.jpg" alt="">
</picture>
</header>
components/organisms/header/_header.scss
, line 23
3.2 organisms.card_wrapper Card Deck, vertical cards
A set of equal width and height cards that aren’t attached to one another. 3 column sorted. Only applies to small devices and above.
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Card deck title
Card 1

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

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

With supporting text below as a natural lead-in to additional content.
A card without a title
A card without a title
A card without a title
Markup: components/organisms/card_wrapper/card_wrapper.twig
<div class="card-wrapper top [modifier class]">
<div class="container">
<h2 class="card-title text-center">Card deck title</h2>
<div class="card-deck">
<div class="col">
<div class="card bg-brand text-center">
<h3 class="card-header">Card 1</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_1.jpg" ></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card bg-brand-lightest text-center">
<h3 class="card-header">Card 2</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg" ></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card bg-gray text-center">
<h3 class="card-header">Card 3</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_3.jpg" ></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
<div class="col">
<a href="#" class="card card-button bg-gray-lightest text-center" title="title text">
<h3 class="card-header">Card 4</h3> <div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">A card with multiple paragraphs</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="#" class="card card-button bg-white text-center" title="title text">
<h3 class="card-header">Card 5</h3> <div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="#" class="card card-button bg-white text-center" title="title text">
<h3 class="card-header">Card 6</h3> <div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<div class="card bg-white text-center">
<div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">A card without a title</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card bg-white text-center">
<div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">A card without a title</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card bg-white text-center">
<div class="card-content">
<div class="card-media"></div> <div class="card-body ">
<p class="card-text">A card without a title</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
components/organisms/card_wrapper/_card_wrapper.scss
, line 1
3.2.1 organisms.card_wrapper.horizontal-left Card Deck, horizontal cards with image left
A set of equal width and height cards that aren’t attached to one another. 2 column sorted. Only applies to small devices and above.
Card deck title
header

With supporting text below as a natural lead-in to additional content.
With a link
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 a linkheader

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/organisms/card_wrapper/card_wrapper_horizontal_left.twig
<div class="card-wrapper bg-brand-lightest left ">
<div class="container">
<h2 class="card-title text-left">Card deck title</h2>
<div class="card-deck">
<div class="col">
<div class="card card-horizontal bg-brand text-left">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_1.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p></p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-brand-lightest text-left">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-gray text-left">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-gray-lightest text-left">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
components/organisms/card_wrapper/_card_wrapper.scss
, line 51
3.2.2 organisms.card_wrapper.horizontal-right Card Deck, horizontal cards with image right
A set of equal width and height cards that aren’t attached to one another. 2 column sorted. Only applies to small devices and above.
Card deck title
header

With supporting text below as a natural lead-in to additional content.
With a link
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 a linkheader

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/organisms/card_wrapper/card_wrapper_horizontal_right.twig
<div class="card-wrapper bg-brand-lightest right ">
<div class="container">
<h2 class="card-title text-right">Card deck title</h2>
<div class="card-deck">
<div class="col">
<div class="card card-horizontal bg-brand text-right">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_1.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p></p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-brand-lightest text-right">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p></p><a href='#'>With a link</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-gray text-right">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal bg-gray-lightest text-right">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div> <div class="card-body ">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
components/organisms/card_wrapper/_card_wrapper.scss
, line 72