Overview
Cards act as container or surface for displaying relevant grouped information. Cards can be used as a single entity or in lists or grids for browsing and are often interactive. Cards can contain a wide range of both static and interactive content. They should not be nested within other cards and cannot divide into multiple cards. The card container is the only required element in a card.
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.
Card Header
Card title
This is a card with supporting text below as a natural lead-in to additional 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.