Card

@/components/ui/Card

Standard beholder for innhold: surface-flate, kant via box-shadow, 12px radius, ingen dropskygge i hvile.

Når brukes den

Bruk som generell innholdsbeholder — en seksjon, et sammendrag, en gruppe felter.
tone="hero" for DEN ene fremhevede flaten på en side (gråtonet gradient) — ikke som standard, og ikke flere enn én per flate.
Ikke bruk til hver enkelt rad i en liste — det er ListRow i en delelinje-delt beholder, aldri ett kort per rad.
Ikke bruk til et enkelt KPI-tall med egen chrome — det er StatCard.

Standard

Grunnleggende beholder — innhold og layout inni er helt fritt.

Kort

Surface-flate, kant via box-shadow, 12px radius. Standard beholder for innhold.

<Card>
  <Heading level={4}>Kort</Heading>
  <Text variant="copy-13" tone="secondary">Innhold …</Text>
</Card>

tone="hero"

Gråtonet gradient (samme materiale som StatCard sin hero-variant) — DEN ene fremhevede flaten på en side.

Fremhevet kort

Bruk maks én hero-flate per side — ellers mister den effekten.

<Card tone="hero">…</Card>

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

children *

ReactNode

—

Innholdet i kortet.

tone

'default' | 'hero'

'default'

`hero` bruker den gråtonede `--gradient-hero`-flaten for DEN ene fremhevede flaten på en side.

className

string

—

Ekstra klasser, f.eks. padding-overstyring (`p-0`, `p-4` …).