Card

Release dato: 03.10.2024

Sist oppdatert: 20.05.2025

Card (kort) brukes for Ă„ gruppere innhold som hĂžrer sammen, og kan inneholde tekst, bilde, ikon, knapp og lenker, eller en kombinasjon av disse. Card gjĂžr det enklere Ă„ skanne, sammenligne og velge mellom flere elementer.

Test komponenten

Relaterte komponenter

Varianter

Card finnes i to hovedvarianter. Du kan kombinere disse med ulike skins og farger.

LayoutBruk
PortraitInnhold stables vertikalt, fungerer godt nÄr du legger flere card ved siden av hverandre
LandscapeNĂ„r du vil bruke mer av bredden, f.eks. i desktop-visning
SkinBruk
OutlinedNĂ„r du vil ramme inn uten bakgrunn
FilledFull bakgrunnsfarge
No paddingFjerner marger inne i cardet
BildestilBruk
SquareGir et strammere uttrykk
RoundMer lekent, harmonerer med Oslo-profilen

Retningslinjer for bruk

Bruk card nÄr

  • du vil gruppere informasjon
  • du trenger oversiktlige valg i grid eller liste
  • du Ăžnsker fleksibel visning med eller uten bilde, innhold eller handling

UnngÄ card nÄr

  • du bare viser Ă©n ting og ikke trenger visuell gruppering
  • informasjonen egner seg bedre i ren tekst eller tabell

Tilpass cardet til ditt innholdsbehov

Komponenten er fleksibel, og du kan selv velge om du vil bruke:

  • tekst
  • tittel
  • undertittel
  • bilde
  • tags over eller under innholdet
  • lenker eller knapper

Du kan ogsÄ velge om hele cardet skal vÊre klikkbart.

UnngÄ Ä overlesse cardet. Bruk luft og visuell prioritering. Om du bruker flere card i samme lÞsning, kan det vÊre lurt Ä designe alle like og bruke de samme elementene konsekvent.

GjĂžr slik

Eksempel pÄ ryddig, tydelig og konkret innhold
Hold innholdet ryddig, tydelig og konkret

UnngÄ

Eksempel pÄ cardet med mye innhold.
UnngÄ Ä overlesse cardet med innhold

Skriv tydelig og konsist

Innholdet i et card skal vÊre lett Ä skanne. Bruk korte titler og tydelig handling. Hvis cardet er klikkbart, mÄ det vÊre klart hvor det leder, fÞlg regler for god lenketekst.

GjĂžr slik

Eksempel kort og tydelig tekst pÄ radene
Skriv lettlest innhold og tydelig lenketekst

UnngÄ

Eksempel lang innhold pÄ radene
UnngÄ uklart innhold og utydelig lenketekst

Responsivitet

Card tilpasser seg automatisk til ulike skjermstĂžrrelser. Innhold bryter linjer og grid flyter om ved behov.

Landscape-card skaleres automatisk ned til portrait pÄ smÄ skjermer. PÄ mobil anbefaler vi Ä bruke portrait-layout som utgangspunkt, sÊrlig dersom cardsene vises i listevisning.

Vi anbefaler at du uansett tester ulike visningsformer og antall cards i din lĂžsning.

Universell utforming

Card skal kunne brukes og forstÄs av alle, ogsÄ de som bruker tastatur eller skjermleser. Her er noen viktige prinsipper for Ä sikre tilgjengelighet:

Struktur og semantikk

Bruk riktig heading-nivÄ i konteksten der cardet vises, og sÞrg for at alle card pÄ samme nivÄ i lÞsningen ogsÄ benytter samme heading-nivÄ. Dette gir god struktur for skjermlesere og visuell lesing.

Interaktive og ikke-interaktive card

Et card kan enten vĂŠre:

  • Interaktivt: hele cardet fungerer som en lenke eller knapp
  • Ikke-interaktivt: cardet inneholder klikkbare elementer som knapper eller lenker

UnngÄ Ä blande disse. Ikke legg knapper inne i et kort som allerede er klikkbart - knappen vil vÊre umulig Ä nÄ med musepeker. Kort sagt: én handling per omrÄde.

Tastaturnavigasjon og fokus

Brukeren skal kunne bruke “Tab” for Ă„ navigere:

  • I interaktive card: Hele cardet er et tab stop og aktiveres med “Enter” eller “Mellomrom”.
  • I ikke-interaktive card: Bare knapper og lenker er fokuserbare

Alle fokuserbare elementer har tydelig visuell fokusindikator. Skriv tydelig lenketekst som skjermleseren forstÄr, les mer om gode lenketekster her.

Les mer om universell utforming av cards:

Anatomi

ElementBeskrivelse
1. LabelOverskrift for kortet. Bruk <h3> eller tilsvarende semantikk
2. BrĂždtekstForklarende tekst som utdyper innholdet
3. BildeIllustrasjon eller fotografi (valgfritt)
4. HandlingLenke eller knapp for navigasjon eller videre handling, brukes kun dersom ikke hele cardet er klikkbart (valgfritt)
5. ContainerKortets ramme, med eller uten kantlinje og padding

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-card");

Dersom du bruker verktÞyene i punkt-testing-utils sÄ kan dette bli gjort automatisk for deg.

Props og tokens

PropTypeBeskrivelse
headingstringTittel pÄ card
headingLevel1
2
3
4
5
6		NivÄet pÄ headingen. Brukes for tilgjengelighet.
subheadingstringUndertittel pÄ card
layoutvertical
horizontal		StÄende/liggende. Portrett/landskap. Horisontal/vertikal. KjÊrt barn

skinoutlined
outlined-beige
gray
blue
beige
green		Fargen pÄ card. Velg mellom outlined, outlined-beige, gray, blue, beige og green.
paddingnone
default		Skal det vÊre padding pÄ innsiden av card?
metaLeadstringUndertekst med fet skriftvekt
metaTrailstringUndertekst med normal skriftvekt
tagPositiontop
bottom		Plassering av tags i card
clickCardlinkstringHref sendes inn som streng for Ă„ gjĂžre card klikkbart. Heading brukes som lenktetekst.
openLinkInNewTabbooleanVelg denne dersom du Ăžnsker at lenken i card skal Ă„pnes i ny fane.
borderOnHoverbooleanVi anbefaler hoverborder pÄ klikkbart card. Kan slÄs av ved behov.
imageobjectBildet pÄ card. Tar inn et objekt av typen {src: string, alt: string}.
imageShapesquare
round		Her kan vi velge om bildet i card skal vĂŠre firkantet eller rundt.
tagsarrayListe av tags pÄ card. Tar inn et array med objekter med fÞlgende stringproperties: skin, iconName, ariaLabel, text
ariaLabelstringTekst til skjermleser for aria-label pÄ card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer.
Slot (children)Beskrivelse
defaultInnholdet i card