Card
Card er en overflate-komponent som grupperer relatert innhold i et visuelt avgrenset område. Den gir bakgrunn, ramme og padding via padding-proppen. Card gjør ikke antagelser om innhold — det er opp til deg å strukturere innholdet med Flex, overskrifter og andre komponenter.
Bilforsikring
Kaskoforsikring — fornyes 1. januar 2025
Viktig informasjon
Ikke legg interaktive elementer (knapper, lenker) inne i et clickable Card — det skaper nested interactives som er ugyldige i HTML og problematiske for skjermlesere.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
childrenReact | React.ReactNode | Ja | — | Kortets innhold. Strukturer med Flex, overskrifter og andre komponenter. |
paddingReact | "s" | "m" | "l" | "xl" | Nei | "s" | Innvendig padding. Bruk l/xl for romslig innhold som fremhevede kort. |
variantEgendefinert | "outlined" | "high" | "low" | Nei | "high" | Visuell variant. high gir sterk skygge, low svak skygge, outlined kantlinje uten skygge. Velg etter bakgrunnskontrast. |
clickableEgendefinert | boolean | Nei | false | Markerer kortet visuelt som klikkbart (hover/fokus-effekter). Du må selv rendre kortet som et klikkbart element. Husk aria-label. |
asEgendefinert | React.ElementType | Nei | "div" | Polymorf komponent — bytt ut rotelementet. Bruk as="a" for klikkbare kort. |
classNameReact | string | Nei | — | Egendefinerte CSS-klasser. |
Eksempler
Varianter: high, low og outlined
high (standard) brukes på hvit bakgrunn, low på lys grå bakgrunn, outlined der du vil unngå skygge helt.
Sterk skygge. Bruk på hvit bakgrunn.
Svak skygge. Bruk på lys grå bakgrunn.
Kantlinje, ingen skygge.
Klikkbart kort
Bruk as="a" og clickable for å gjøre hele kortet klikkbart. Sett aria-label så skjermleseren ikke leser alt innholdet.
Detaljkort med oppsummering
Kombiner Card med DescriptionList for å vise nøkkel-verdi-informasjon i et ryddig panel.
Bilforsikring kasko
Aktiv- Registreringsnummer
- AB 12345
- Månedspremie
- 542 kr
- Neste forfall
- 15. april 2026