Cards provide a flexible and extensible content container with multiple variants and options.

Base card

The card component uses little markup, but offer lots of customization options. All cards are build around the same base markup, but can vary in design.

Base card structure

The most basic card structure can be seen below. This structure is the least amout of markup required to make a card component.

<div class="card">
  <img src="..." alt="..." class="card__image">
  <div class="card__body">
    <h2 class="card__headline">Card</h2>
    <p>Content goes here.</p>

*Note: While the above code is the least amout required code to make a card, it is also nessesary to add a card type to apply the correct style.

Card types

There are several types of cards avaliable. The card types are variants to the base card and applies styles fitting to the type. Types are applied by adding a class with card--{CARD TYPE}, to the div with the card class.

To read more about each type in detail go to Card types.

Card sections

A card component can be split into several sections. A section could be different list types, preformatted text or similar. Sections are mainly placed within the card body.


* Note: Not all sections fit all card types.

To read more about each section in detail go to Card sections.

Disable a card

Cards can be disabled (visually) by adding the class .disabled to the base card class.


<div class="card card--base disabled">
   <img src="..." alt="" class="card__image">
   <div class="card__body">
      <h2 class="card__headline">Card</h2>
Back to top