Cards act as containers to group related information together.
Cards make it easy to scan for relevant and actionable information by grouping them. Elements, like text and images, should be placed inside them in a way that clearly indicates hierarchy. This way multiple different sections can be created within a page.
Cards can be arranged vertically, horizontally or in a grid.
Default card is the most used type of card. It consists of a shadow, Shadow 10 by default.
Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (top, right, bottom, left) and not somewhere in between.
Flat card is used to create sections within a default card i.e. card inside a card.
| Property | Value(s) |
|---|---|
| Corner radius | 4 px |
| Property | Value(s) | Default value |
|---|---|---|
| Style | Shadow 10 |
To indicate that the content is scrollable within a card, use a scrollbar. The dividers in the header and the footer should only be shown when the content is scrollable.
Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (bottom, right, etc.) and not somewhere in between.
Flat card is used when there is a need to create sections within a default card i.e. card inside a card.
When data is not available, the card remains empty. In that case, an illustration and/or an error message is displayed.
