StatCard

@/components/ui/StatCard

Felles KPI-kort — samme materiale som Card (bg surface, kant via box-shadow, radius-md), med tall/etikett/ikon-oppsett.

Når brukes den

Ett fremhevet tall med kort rundt — dashbord, økonomi og byggsidens nøkkeltall.
`tone="hero"` for DEN ene fremhevede metrikken på en flate (gråtonet gradient), `tone="error"` for akutte/kritiske tall (flat feil-tint). `danger` er beholdt som alias for `error`.
Etikett og ikon er `text-secondary` som standard — bruk `labelColor` KUN når etikett og ikon skal farges sammen (f.eks. grønn/rød på inntekt/utgift), ikke som en generell tone-effekt.
`children` for ekstra innhold under `sub` — f.eks. en fremdriftslinje.
Ikke bruk til et sett med mange små feltverdier i rutenett — det er DescriptionList sin jobb (uten kort-chrome per felt).
`StatCardRad` for MOBILRADEN av flere StatCard — aldri et eget håndrullet grid. Nøkkeltall stables aldri i én kolonne på mobil (UX-strategi 11. sep 2026, mønster 6): mobil er alltid 2 kolonner, `kolonner` styrer kun fra `sm`.

Eksempler

Standard, hero og error

De tre tonene side ved side — bruk maks én `hero` per flate.

Estimert total

kr 1 240 500

Neste 10 år

Fremdrift

62 %

18 av 29 tiltak

Akutte tiltak

Bør tas nå

<StatCard icon={Trend} label="Fremdrift" value="62 %" sub="18 av 29 tiltak" tone="hero" />

labelColor — etikett og ikon farget sammen

Eksplisitt overstyring når to kort skal leses som et par (inntekt/utgift). Standard uten `labelColor` er alltid `text-secondary`.

Inntekter

kr 42 000

Utgifter

kr 31 000

<StatCard icon={Trend} labelColor="var(--color-success-text)" label="Inntekter" value={kr(sum)} />

Med ekstra innhold

`children` for innhold under `sub`, f.eks. en kort forklaringslinje.

Estimert total

kr 1 240 500

Neste 10 år

Oppdatert etter siste tilstandsrapport.

StatCardRad — mobilraden, 3 og 4 kort

Krymp vinduet under 640px: begge radene forblir 2 kolonner — nøkkeltall stables ALDRI i én kolonne på mobil. Bruk denne fremfor et eget grid på siden.

Estimert total

kr 1 240 500

Fremdrift

62 %

Akutte tiltak

Total

kr 1,2M

Inntekt

kr 42 000

Utgift

kr 31 000

Akutte

<StatCardRad kolonner={4}>
  <StatCard icon={Lommebok} label="Total" value="kr 1,2M" />
  …
</StatCardRad>

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

icon

LucideIcon

—

Valgfritt ikon foran etiketten.

label *

string

—

Kort etikett over verdien.

labelColor

string

—

Overstyrer etikett- OG ikonfargen sammen (f.eks. suksess/feil på inntekt/utgift). Uten den: alltid text-secondary.

value *

ReactNode

—

Hovedtallet — vises stort (heading-24, tabular-nums).

valueStyle

CSSProperties

—

Ekstra stil på verditeksten.

sub

ReactNode

—

Liten forklaringslinje under verdien.

subStyle

CSSProperties

—

Ekstra stil på sub-linjen.

tone

'default' | 'hero' | 'error' | 'danger'

'default'

`hero` bruker den gråtonede gradienten for DEN ene fremhevede metrikken, `error`/`danger` (alias) en flat feil-tint.

className

string

—

Ekstra klasser på kortet.

children

ReactNode

—

Ekstra innhold under sub (progressbar, notis o.l.).

Beslektede komponenter

description-list

field

card