Egnet til:

• Gruppering av opplysninger i skjema, for eksempel inntekter, personer eller oppsummeringer.
• Vise status knyttet til en samling av opplysninger, inkludert dulting.
• Seksjon i et dashboard.
• Liste med filer.

Uegnet til:

• Uthevede tekstbokser med mye tekst. Bruk Panel i stedet. 
• Varsler og feilmeldinger.

Komponenter som ligner:

• Panel - informasjonboks som står alene på siden.
• Alert - varsel og feilmeldinger

Teknisk dokumentasjon

Se Card i Storybook for tekniske detaljer. 

Varianter

Card kommer med flere fargevarianter:

• Gul (Ochre)
• Grønn (Forest)
• Rød (Burgundy)
• Blå (Denim)
• Grå (Graphite)
• Hvit (White)

Bakgrunnsfargen og rammefargen hører sammen; det er ikke mulig velge dem separat.

Komponentens oppbygging

Card er ment å være en fleksibel komponent som støtter mange typer innhold. Komponenten har derfor en fleksibel oppbygging med flere valgfrie underkomponenter. 

Card sin oppbygging og struktur

Merknad (Note) 

Underkomponenten Note brukes til å vise en merknad på kortet. Mekanismen kan med fordel brukes til dulting, eller når du at andre grunnen ønsker at brukeren skal rette oppmerksomheten mot en gruppe av opplysninger. Merknaden kan ha tre ulike farger som representerer merknadens alvorlighetsgrad: 

• blå (neutral)
• gul (warning)
• rød (danger)

Tittel (Header)

Underkomponenten Header er ment å innholde en tittel som settes konteksten og beskriver innholdet i kortet. Innhold er venstrejustert, men det er mulig å legge til en høyrejustert som for eksempel en tagg/status.

Innhold (Content)

Underkomponenten Content er ment å innholde hovedinnholdet. Innhold er venstrejustert, men det er mulig å legge til en høyrejustert innhold.

Handlinger (Actions)

Underkomponenten Actions er ment å innholde aksjonsknapper som lukkekryss eller endreknapp.

Luft og padding

Det er mulig å tilpasse padding inni Card. Hvis du setter padding i selve kortet vil underliggende inndelinger (Tittel og Innhold) bruke samme padding. Det er imidlertid mulig å overstyre dette og ha individuell padding på underkomponentene.

Hvordan bruke komponenten

Når vi designer nettsider med mye innhold er det viktig å unngå at brukeren blir overveldet av det som ligger der – for eksempel å bli møtt med lange blokker med tekst, vanskelig språk eller store tabeller. Klarspråk, overskrifter og typografi er et viktige virkemiddler for å strukturere tekstlig innhold. På samme måte kan bruke vi bruke kort for å hjelpe med struktur og oversikt når det kommer til data og opplysninger. 

Forskjellig farge fra bakgrunn

For å skape en god kontrast og tydelige grupper anbefaler vi generelt å la bakgrunnsfargen til Card være forskjellig fra bakgrunnfargen på siden, for eksempel grått kort på hvit bakgrunn. Forsøk å bruke samme bakgrunnsfarge for samme type elementer for et ryddig oppsett. Hvit er standardfarge hvis man ikke angir noe.

Bruk samme struktur i kortene

Et kort står sjelden alene; de er repterende i sin natur. Hvis du bruker fast oppsett, gjerne med kolonner og konsistent bruk av luft på kort av samme type vil de ofte være lettere å «skanne» med blikket. På den måten hjelper du brukeren å få oversikt over innholdet.

 

Gjør slik: Gjenta kort for repeterende opplysninger

Gjør slik: Bruk kolonner og struktur i kort for å støtte lesbarhet og aksjoner

Card i oppsummeringssteg

Relaterte mønstre

• Legge til - hvordan legge til og fjerne
• Fokus i ensideapplikasjon - hvordan styre fokus når man legger til/fjerner opplysninger.

Universell utforming  

• Hvis du har en gruppe med Cards, kan du bruke aria-labelledby for å legge hvert enkelt kort i en <section>. Husk at du må ha en overskrift som aria-labelledby peker til. Dermed blir hver <section> navngitt, og du får bedre struktur og semantikk. 
• Husk på tastaturfokus når du kan endre, slette og legge til Cards.