Cards

Cards provide a set of content which acts as an entry point to more detailed information.

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.

Card Header

Card Title

Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

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.
  • 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.
What's Changed
DateVersionNotesContributors
11/23/20201.0.0Shadow depth identified for hover state. Padding adjusted to fit the grid.E. Bohn, E. Gunther, L. Cook