Overview
Much like our desktop experiences, the card component is the primary means of containing content. The component is flexible in the sense that designers can insert any form of content that they wish as long as it conforms to the core structure (such as padding, border radius, border and shadow) of the component.
In addition to the structuring of the component, the card includes configurable items such as titles and a footnote that gives designers an element that can provide users with further context to a given experience.
Key Features
The card component has two sizes (default and stacked) and multiple types (elevated, bordered, borderless and flat). These different variants of the component support different needs such as stacking multiple elements of the card while using different card types in accordance with the importance of the contained content with this importance being shown through the border and/or shadow of the card component.
- There are four types of card. These should be used in accordance with the importance of their content. These are: elevated, bordered, borderless and flat.
- The external title of a card should be used to provide content to the card as a whole. When the stacked size is used, the external title applies for all of the card’s content.
- The internal title should only be used for the default type.
- This is location of the footnote for the card.
- When added, additional items are contained within stacked slots when the stacked card type is selected.
Usage
Cards and their content should be understandable on their own without the need of external titles.
While there are instances where a card's content requires further information for users, particularly for information that's unique to our mobile apps and not commonly found in other popular mobile apps.
Avoid using the external and internal card header in tedium. This is to prevent clutter and confusion within the card for users.
Footnotes should be used against similar content and where possible against single item cards.
Avoid applying footnotes for cards that contain multiple items that may not be related to each other.
While cards have different card types (that can be used to emphasis importance of content), only one type of card should be used at the same time on a given page.
Avoid using multiple, different types of card in the same page.