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 when typographic hierarchy and a divider can be used to create a simpler layout.
Don’t contain information about multiple topics within the same card. The card’s purpose should be clear and focused.
Interactivity
- Where cards are interactive, use an action component as the last element within the card to indicate that it's interactive
- Where there's only one interactive element inside the card, the whole card should should be clickable
- Where there are multiple interactive elements inside the card, the card itself should not be clickable
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links
- Link URL