A short label for a state, a category or a count, coloured by meaning and always readable without the colour.
SuccessWarningErrorInfo
NeutralAccentOutline128
Tier 1 · CSS only
Text label
preview
Components
Data display
Dense information that stays calm, with tabular figures, quiet borders and state shown in shape as well as colour.
A coloured dot beside the word for a state, like Online, Degraded or Paused, with an optional pulse for things happening now.
Online
Away
Offline
Inactive
In progress
Tier 1 · CSS only
Text label
preview
A person's photo or initials, in three sizes, and overlapping groups with a count for the rest.
ABCDEFGHIJ
SMMDLG
A group of five
Tier 1 · CSS only
Image
preview
A surface that groups one thing's content, with an optional header and footer, and a whole-card link that stays accessible.
Card title 1
SuccessSupporting text for the card.
Card title 2
WarningSupporting text for the card.
Card title 3
ErrorSupporting text for the card.
Tier 1 · CSS only
Article
preview
A key or a keyboard shortcut, for help text, menus and the command palette.
Search everything with ⌘K (or CtrlK).
Move between options with ↑↓, choose with Enter, close with Esc.
Tier 1 · CSS only
Native kbd
preview
Planned for this page
- Stat tile
- Data table
- Data grid
- Timeline
- Description list
- Code block