4.1 organisms.header Header

Header organism. Added at every page at the top.

Example
<header id="header" class="header">
  <div class="logo">
    <a href="">      <img src="../kss-assets/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>
Source: components/organisms/header/_header.scss, line 1
Example
    <header id="header" class="header with-bg-image bg-brand">
  <div class="logo">
    <a href="">      <img src="../kss-assets/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/placeholder_1.jpg" alt="">
    </picture>
  </header>
Source: components/organisms/header/_header.scss, line 23
Example
    <header id="header" class="header with-bg-image bg-brand">
  <div class="logo">
    <a href="">      <img src="../kss-assets/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-6">
      <img src="../kss-assets/placeholder_3.jpg" alt="">
    </picture>
  </header>
Source: components/organisms/header/_header.scss, line 96

4.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.

      <div class="bg-brand-lightest card-wrapper top ">
  <div class="container">
    <h2 class="card-title text-xs-center">Card deck title</h2>
    <div class="row">
     
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 1</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 2</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 3</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 4</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 5</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 6</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 7</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 8</h3>     <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>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-xs-center bg-white" title="title text">
    <h3 class="card-header">Card 9</h3>     <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>
    </a>
      </div>
      </div>
  </div>
</div>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 1

4.2.1 organisms.card_wrapper.horizontal Card Deck, Horizontal cards

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.

    <div class="card-wrapper bg-brand-lightest left ">
  <div class="container">
    <h2 class="card-title ">Card deck title</h2>
    <div class="row">
     
    <div class="col">
          <a href="#" class="card card-button card-horizontal bg-white" title="title text">
   <div class="card-media"> <img src"/kss-assets/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>
    </a>
      </div>
   
    <div class="col">
          <a href="#" class="card card-button card-horizontal bg-white" title="title text">
   <div class="card-media"> <img src"/kss-assets/placeholder_3.jpg" > </div>   <div class="card-block ">
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
    </a>
      </div>
      </div>
  </div>
</div>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 9