Skip to main content

Cards

Cards contain content and actions about a single subject.

Overview

Cards are containers for displaying relevant and actionable information on a single topic. A card serves as a single, contained unit and is independent of surrounding content. It cannot be nested within cards and cannot divide into multiple cards.

The appearance of cards helps users understand how their contents are related, but it might make sense to provide more detail about the relationship.

Cards act like buttons, that means by default they are triggered by users.

They can encompass 2 outcomes, which can exclusively be combined through a pre-command, usually a button, that would toggle the 2 default interactions, namely:

  • Open: access relevant information
  • Select: mark card(s) for further action (e.g., delete)

Usage

Use when

  • You need to group information in a digestible form.
  • You need to offer a short entry point that is linked to more detailed content or a complex task.
  • Lay out single or multiple sets of related information in the same region of the page. Cards may include an image, a text summary, and actions.

Don’t use when

  • You need to show unrelated content types or actions in a single container.
  • You need to show content in multiple columns.
  • You need to display content in a table format.
  • Grouping a large set of related information.

Types

Cards are qualified by content type.

Example Content Type When to use
Default Text Cards Text, no Action Use it to provide previews of nested text-heavy contents, that allow users to determine actions required on a glimpse.
Action Text Cards Text, Action Use it to provide previews of nested text-heavy contents, that allow users to execute quick actions required on a glimpse.
Default Image Cards Image, no Action Use it to provide previews of content better understandable through images (i.e. 3D-model), that allow users to determine actions required on a glimpse.
Action Image Cards Image, Action Use it to provide previews of content better understandable through images (i.e. 3D-model), that allow users to execute quick actions required on a glimpse.
Last updated November 27, 2023.