Cards

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

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.

Example