Active projects
24
6 due this weekAcross three workspaces
A surface-agnostic hierarchy for one named quantitative value, optional change, and concise supporting context. MetricCard composes that content with Card when a dashboard needs a bounded summary surface without inventing local numeric typography or panel geometry.
The value stays on ordinary product heading scale with tabular numerals, so adjacent quantities scan as a set. Change text states direction while the intent modifier describes the outcome — a lower response time can be positive.
Monthly revenue
€84,240
+8.2%Compared with last month
Median response time
1m 42s
Down 18sAcross 1,248 requests
Open incidents
3
+2 todayOne requires attention
All three values share one hierarchy. Direction remains in visible text, while success and error hues communicate whether the domain result is favorable.
Active projects
24
6 due this weekAcross three workspaces
Card continues to own surface, border, radius, and inset. MetricCard adds only arrangement and composes the ordinary icon Button for actions.
Intent belongs only to the optional comparison. The value itself stays primary and neutral so semantic color never overwhelms cross-card comparison.
| Example | Intent | Modifier | Usage |
|---|---|---|---|
| No material change | Neutral | — | Context without a favorable or unfavorable judgment |
| Down 18s | Positive | --positive | A favorable outcome, regardless of numeric direction |
| +2 today | Negative | --negative | An unfavorable outcome, with direction still stated in copy |
Metric standardizes quantitative hierarchy without becoming a dashboard-specific card or chart.
| Verdict | Rule |
|---|---|
| Do | Use Metric for one named quantitative value that should remain comparable with neighboring metrics. |
| Do | State direction in visible comparison copy and choose intent from the domain outcome, not from up or down alone. |
| Do | Combine ds-card and ds-metric-card when the value needs a bounded summary surface. |
| Do | Keep support copy concise and specific, such as the comparison period or denominator. |
| Don’t | Use color or an arrow as the only change signal. |
| Don’t | Add interaction to Metric itself; compose an existing control or use an interactive Card destination. |
| Don’t | Invent display-sized numbers, independent card geometry, or per-dashboard status colors. |