Card
We use cards to ensure consistent interactive states, when a button or a link is not enough.
General guidelines:
- Use cards to display content and actions on a single topic.
- Avoid using a single card, but instead when there are at least two of them.
- Cards can be one large touch target, or include buttons for actions.
- When multiple actions inside the card, avoid making the whole card actionable.
- Use for showing a number of items of the same thing in a grid layout.
- Use for selecting an item from a list where more context is required than a chip can provide.
- Use for actions where the user requires more context than a normal button can provide.
- Do not use for visually grouping separate items. Panes should be used for this.
- Do not use where buttons, chips, or plain links would be more appropriate.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| clickable | clickable | ||
| disabled | disabled | ||
| selected | selected |
