What is a Dashboard Card?
A Dashboard Card is a card used on a dashboard to highlight key metrics or a status and any related information. It can be static or interactive. An interactive Dashboard Card can be used to filter or navigate.
It differs from the Card component, which is an option in a group of selectable items with a select element or call-to-action.
Why is it not available as a component?
We have aligned the design of these cards as much as possible without applying consistency across the board, because the visual hierarchy may vary based on the intended context.
These examples serve as a guide rather than a strict design system component, so that each card belongs to the same family while remaining fit-for-purpose.
Similarities and differences
What stays consistent
Elements that remain consistent across all Dashboard Cards are:
|
Element |
Description |
|---|---|
|
1. Contextual help placement |
Popover with more content explaining the context of the card. Sits inline with card title. |
|
2. Background colors |
- Default is color.background.primary.default - The grey alternative (color.background.secondary.transparent) is used to distinguish between two separate groups of cards. |
|
3. Border color |
color.border.primary |
|
4. Border radius |
6px |
|
5. Padding |
16px |
|
6. Interaction state: rest |
Matches Card rest state |
|
7. Interaction state: hover |
Matches Card hover state |
|
8. Interaction state: focus |
Matches Card focus state |
Where Dashboard Cards can differ
Title
- When the title is focal: text.body.bold.medium font token and primary text color token
- When the title isn’t focal: text.body.regular.medium font token and secondary text color token
Gap between content
- Less content: 8px
- More content (when the content needs to be visually chunked): 12px
Stat (the featured information)
- Number only: text.heading.large font token
- When text is included: text.heading.medium font token
Footer text
- On primary background: tertiary text color token
- On secondary background: secondary text color token (tertiary doesn’t pass Level AA color contrast)
Icon placement
- When the icon is primary information: large and inline with the stat
- When the icon is secondary information: small and inline with the card title (4px to the right) or right-aligned within the card
- The placement choice should be based on context, e.g., in Tasks cards the icons are right-aligned because the Task Status icons are visually heavier. In Infrastructure cards, the icons are inline with the title because they are small and directly correlate with the title, which is especially important when a separate Badge status appears beside the title and icon.
Gap between cards
- 8px for smaller cards
- 16px for larger cards
Selected interaction state
A card’s selected state may or may not change background color based on its content, e.g., Insights cards do not change background color because the trend Badges have insufficient contrast on the light blue background.
Examples
The following examples have been separated into the categories “Less content” and “More content”, as hierarchy and spacing need to be approached differently when displaying more information.
Less content
Tasks
Insights
Infrastructure
Usage
More content
Live status - App health
Live status - Sync status
Live status - Last deployment
Live status - Feature flags
