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
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:
- Avatar (optional): An image.
- Title: Describes the card content.
- 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.
- 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
- 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.
Anatomy of a card
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.