molecule
gy-kpi-card
Count-plus-label tile used across KPI rows with mode-driven tokens and optional size, threshold, trend, and inline sparkline slot.
Live
What you ship.
Markup
<gy-kpi-card value="14" label="velocity" size="lg" trend="up">
<gy-sparkline slot="sparkline" label="14-day trend"></gy-sparkline>
</gy-kpi-card>Prop space
Tier
Tag
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
value * | string | number | no default | Headline count or metric — rendered large with tabular-nums. |
label * | string | no default | Short uppercase label beneath the value. |
href | string | no default | Optional deep-link target. When set, the card becomes an `<a>`. |
tone | 'default' | 'muted' | 'default' | Optional tone override; "muted" greys the value. |
size | 'sm' | 'md' | 'lg' | 'md' | Display size; defaults to "md" (the legacy v0.8.3 surface). |
threshold | 'ok' | 'warn' | 'bad' | no default | Optional status threshold; tints the value + accent border. |
trend | 'up' | 'down' | 'flat' | no default | Optional trend indicator; renders a small decorative arrow. |
Slots: children,sparkline.
Where this lives
import '@gyrum-labs/components/kpi-card/kpi-card.js';