Use a card to group content into a visible container.
Cards can contain anything, including text, images, buttons and icons.
There are 2 types of card.
1. Solid
2. Outline
Usage
Display multiple cards together in a list or grid when dividing content into sections or providing the user with a range of options.
Don’t use a card purely for decoration rather than structure or meaning. Excessive card nesting adds unnecessary hierarchy.
Don’t contain information about multiple topics within the same card. The card’s purpose should be clear and focused.
Interactivity
Shadows
In app, solid cards must use a shadow when either: the entire card is tappable, or any element within the card is tappable. The shadow acts as a visual cue to indicate interactivity.
On web, we rely on the hand/pointer cursor on the card to indicate that a card is clickable. Additional visual affordances (such as chevrons) may be used where helpful. Do not use shadows to indicate interactivity in web-based UI.
Selected state
In app, solid cards may include an optional selected state when required. The selected state displays a visible border around the card. This border is distinct from, and does not replace, a focus ring.
Use the selected state when presenting a group of cards as selectable options.
Outline cards do not support a selected state.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related