Skip to main content


Cards contain content and actions about a single subject.



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. Tap anywhere on a card to navigate to a dialog to view more information and/or tap on a button to take specific action.


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.
  • Laying out single or multiple sets of related information in the same region of the page. Cards may include an image, a text summary, chips, and actions. Cards typically have similar widths, but heights should accommodate varying content.
  • Cards are commonly used on home or dashboard screens.

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.


Cards in Lists Example

What's changed
Date Version Notes Contributors
06/02/2022 1.0.1 Updated full layout. M. Johns