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
