Metrics & feeds
Metric card
Section titled “Metric card”KPI / stat card for dashboards and marketing.
Variants: 3
| Property | Type / options |
|---|---|
| Label | text |
| Value | text |
| Type | Simple · Trend · Chart |
Do
- Lead with the number.
- Use Trend to show change vs a period.
- Keep units in the value.
Don’t
- Don’t show more than four in a row.
- Don’t mix time periods.
- Don’t colour-code without the arrow.
Activity item
Section titled “Activity item”Feed / notification row.
Variants: 2
| Property | Type / options |
|---|---|
| Name | text |
| Time | text |
| Message | text |
| Unread | False · True |
Banner
Section titled “Banner”Full-width announcement bar.
Variants: 2
| Property | Type / options |
|---|---|
| Title | text |
| Message | text |
| Action | boolean (on) |
| Color | Default · Brand |
Code snippet
Section titled “Code snippet”Copyable code, Roboto Mono.
Variants: 2
| Property | Type / options |
|---|---|
| Type | Inline · Block |