Example
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>
Source: components/organisms/header/_header.scss, line 1
Example
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>
Source: components/organisms/header/_header.scss, line 23
Example
Markup: components/organisms/header/header-img-color.twig
    

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

3.2 organisms.card_wrapper Card Deck, vertical cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.

Examples
Default styling

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-brand
Changes background to the brand color.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-brand-lightest
Changes background to the lightest brand color.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-azure
Changes background to azure.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-azure-lightest
Changes background to azure lightest.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-dark-blue
Changes background to blue.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-dark-blue-lightest
Changes background to blue lightest.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-gray
Changes background to gray.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-gray-lightest
Changes background to gray lightest.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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

.bg-white
Changes background to white.

Card deck title

Card 1

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

With a link

Card 2

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

With a link

Card 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>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 1

3.2.1 organisms.card_wrapper.horizontal-left Card Deck, horizontal cards with image left

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.

Example

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 link

header

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>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 55

3.2.2 organisms.card_wrapper.horizontal-right Card Deck, horizontal cards with image right

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.

Example

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 link

header

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>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 76