Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.

Cards allow users to get direct insights without leaving the current screen. A card can also offer further navigation options or actions.

Card with interactive header – live example

Card with icon and button in header – live example

There are some predefined elements for the card header like an image (avatar component), a counter or a button, whereas the card content area can be filled with any component(s). It is also possible to show the card header only, or no header at all.

Card example with list items – live example

Card example with table – live example

Card example with image – live example

Card examples with header only – live example

When to Use

Use cards:

• As an entry point to an app.
• If you want the user to focus on a single object or topic, or on a group of objects.

Don’t use cards:

• For decoration only.

Anatomy

A card comprises two components: a header area and a content area. Both areas are optional.

1. Card Header

The card header consists of the following elements:

1. Avatar (optional): An image.
2. Title: Describes the card content.
3. Subtitle (optional): You can use the subtitle to qualify the title, offer an explanation, or show a status. The use of the subtitle can differ, depending on the card type.
4. Counter (optional): Displays how many items are on the card in relation to the total number of relevant items.
   Format: [Items on Card] of [Total Items]
   Example: 5 of 40
5. Button (optional): An action.

2. Card Content

You can use other web components inside the content area, such as a list, table, timeline, or the components of a form. The structure of the card depends on the type of information it contains.

Behavior and Interaction

You can opt to make the header interactive and specify a click event.

Within the card content area, all the interactions depend on the components used.

Card with a static header and header action button – live example

Card with an interactive header – live example

Globalization and Localization

When designing an application, bear in mind that cards can also be used with right-to-left languages, such as Arabic or Hebrew. In this case, the UI of the card header is mirrored in both display and edit modes.

The globalization and localization behavior for the component within the card content area is defined by the guideline of corresponding component itself.

RTL view for card  with list items – live example

Related Links