MetricCard
MetricCard — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
MetricCard — Prism component.
Accessibility
When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.
Import
const { MetricCard } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
eyebrow | React.ReactNode | — | Small category label above the number. |
value | React.ReactNode | — | The metric itself, e.g. "€248,120" or "1,284". |
unit | React.ReactNode | — | |
delta | React.ReactNode | — | Delta label, e.g. "12.4%". |
deltaDirection | "up" | "down" | "flat" | — | |
icon | React.ReactNode | — | Optional leading icon (shown top-right instead of delta). |
sparklineData | number[] | — | Numbers for the built-in sparkline. |
sparkline | React.ReactNode | — | Or supply a custom chart node. |
actions | React.ReactNode | — | |
className | string | — |