Cards

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.

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.