Cards

Cards act as containers to group related information together.

Usage
Code

Cards make it easy to scan for relevant and actionable information by grouping them. Elements, like text and images, should be placed inside them in a way that clearly indicates hierarchy. This way multiple different sections can be created within a page.

Cards can be arranged vertically, horizontally or in a grid.


Types


Default

Default card is the most used type of card. It consists of a shadow, Shadow 10 by default.

Subdued

Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (top, right, bottom, left) and not somewhere in between.

Flat

Flat card is used to create sections within a default card i.e. card inside a card.


Properties

PropertyValue(s)Default value
Style
  • Shadow 10
  • Shadow 20
  • Shadow 30
  • Subdued
  • No shadow
  • Shadow 10
    Corner radius4px-

    Usage


    Scrolling inside a card

    To indicate that the content is scrollable within a card, use a scrollbar. The dividers in the header and the footer should only be shown when the content is scrollable.

    Highlighting a section

    Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (bottom, right, etc.) and not somewhere in between.

    Card within a default card

    Flat card is used when there is a need to create sections within a default card i.e. card inside a card.

    Empty card

    When data is not available, the card remains empty. In that case, an illustration and/or an error message is displayed.