Card

Release dato: 03.10.2024

Sist oppdatert: 26.10.2026

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.

Har du noen innspill til komponenten?Gi oss beskjed!

Test komponenten

Bilde av en barnehage
BarnevennligMiljøvennlig

Symrahagen barnehage

En barnehage i Oslo by

Dette er en tekst om barnehagen

Kodebygger

PktCard

Innhold
Tittel på card
Undertittel på card
Undertekst med fet skriftvekt
Undertekst med normal skriftvekt
Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card. Klikkbart card får en pil rett etter overskriften.
Stien til bildet
Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative
Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text
ICardTag 1
Farge på tag
Id på ikonet du ønsker å bruke til tag
Tekst for aria-label
Tekst på tag
ICardTag 2
Farge på tag
Id på ikonet du ønsker å bruke til tag
Tekst for aria-label
Tekst på tag
Utseende
Horisontal eller vertikal layout. Ved horisontal layout ligger bildet til venstre for teksten når cardet er minst 36rem bredt, og over teksten når cardet er smalere. Det er bredden på cardet som avgjør, ikke skjermen.
Fargen på card. Velg mellom gray, outlined, transparent, white, blue, green og beige. Transparent har verken bakgrunn eller padding, så teksten flukter med bildet. Gray, outlined og transparent har mørk modus; white, blue, green og beige ser like ut i lys og mørk modus.
Plassering av tags i card
Bruker et sideforhold i stedet for den faste bildehøyden. Uten denne har bildet fast høyde som øker med bredden på cardet, og beskjæres sentrert. Stående: 12.5rem, 14.375rem fra 20rem bredde og 18.125rem fra 30rem. Liggende: 11.5rem når cardet er stablet, 17.875rem fra 36rem bredde og 18.75rem fra 48rem.
Tilgjengelighet
Nivået på headingen. Brukes for tilgjengelighet.
Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.
Teknisk
<PktCard
  heading="Symrahagen barnehage"
  subheading="En barnehage i Oslo by"
  tags={[
    {
      "text": "Barnevennlig",
      "skin": "blue"
    },
    {
      "text": "Miljøvennlig",
      "skin": "green"
    }
  ]}
  image={{
    "src": "/latest/placeholder-image.png",
    "alt": "Bilde av en barnehage"
  }}>
  Dette er en tekst om barnehagen
</PktCard>

Relaterte komponenter

Link card

Når hele cardet kun skal være en lenke uten fleksibelt innhold.

Table

Når du skal vise strukturerte data i kolonner og rader.

Alert

Når du vil vise en fremhevet melding med ikon og tekst.

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
Eksempler på horisontal layout av cardEksempler på vertikal layout av card
SkinBruk
GrayStandard. Grå bakgrunn
OutlinedRamme uten bakgrunn. Bildet får luft rundt seg
TransparentUten bakgrunn og padding. Teksten flukter med bildet
WhiteHvit bakgrunn, til bruk på fargede flater
BlueBlå bakgrunn, når du vil fremheve innhold
GreenGrønn bakgrunn, når du vil fremheve innhold
BeigeBeige bakgrunn, når du vil fremheve innhold

Gray, outlined og transparent støtter mørk modus. White, blue, green og beige har ingen mørk variant. De beholder fargene fra lys modus, også teksten.

Card med default outlineBlått cardGrått card

Bilde

Bildet har fast høyde som øker med bredden på cardet, og beskjæres fra midten. Da får like brede card lik bildehøyde, uansett størrelsen på bildene. Trenger du et bestemt sideforhold, kan du bruke imageAspect.

Klikkbart card

Når hele cardet er en lenke, får overskriften en pil. Når musepekeren er over cardet, blir teksten blå og overskriften understreket.

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

Hold innholdet ryddig, tydelig og konkret

Unngå

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

Skriv lettlest innhold og tydelig lenketekst

Unngå

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 legger seg som portrait når cardet er smalere enn 36rem. Det er bredden på cardet som avgjør, ikke skjermen, så et smalt card stables også på en bred skjerm. 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.

Card på mobil

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:

Inclusive Components – Cards (inclusive-components.design)

En praktisk og pedagogisk gjennomgang av hvordan cards kan være universelt utformet.

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 flate, med bakgrunnsfarge eller kantlinje
Elementene i anatomien til card.

Implementasjon i kode

Hvordan ta komponenten i bruk?

import @oslokommune/punkt-elements/dist/pkt-card.js;
import { PktCard } from '@oslokommune/punkt-react';
<script src="https://punkt-cdn.oslo.kommune.no/20/elements/pkt-card.js" type="module"></script>

Testing

Elements: 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");

Egenskaper

PktCard

Props

Prop:
heading?
Type:
string
Beskrivelse:
Tittel på card
Prop:
headingLevel?
headinglevel?
Type:
"1" | "2" | "3" | "4" | "5" | "6"
Standardverdi:
3
Beskrivelse:
Nivået på headingen. Brukes for tilgjengelighet.
Prop:
subheading?
Type:
string
Beskrivelse:
Undertittel på card
Prop:
layout?
Type:
"vertical" | "horizontal"
Standardverdi:
"vertical"
Beskrivelse:
Horisontal eller vertikal layout. Ved horisontal layout ligger bildet til venstre for teksten når cardet er minst 36rem bredt, og over teksten når cardet er smalere. Det er bredden på cardet som avgjør, ikke skjermen.
Prop:
skin?
Type:
"gray" | "outlined" | "transparent" | "white" | "blue" | "green" | "beige"
Standardverdi:
"gray"
Beskrivelse:
Fargen på card. Velg mellom gray, outlined, transparent, white, blue, green og beige. Transparent har verken bakgrunn eller padding, så teksten flukter med bildet. Gray, outlined og transparent har mørk modus; white, blue, green og beige ser like ut i lys og mørk modus.
Prop:
metaLead?
Type:
string
Beskrivelse:
Undertekst med fet skriftvekt
Prop:
metaTrail?
Type:
string
Beskrivelse:
Undertekst med normal skriftvekt
Prop:
tagPosition?
Type:
"top" | "bottom"
Standardverdi:
"top"
Beskrivelse:
Plassering av tags i card
Prop:
clickCardLink?
Type:
string
Beskrivelse:
Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card. Klikkbart card får en pil rett etter overskriften.
Prop:
openLinkInNewTab?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.
Prop:
zoom?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Forstørrer bildet litt når man holder musepekeren over kortet
Prop:
image?
Type:
ICardImage
Beskrivelse:
Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.
Prop:
imageAspect?
Type:
"auto" | "1-1" | "4-3" | "3-2" | "16-9" | "19-10"
Beskrivelse:
Bruker et sideforhold i stedet for den faste bildehøyden. Uten denne har bildet fast høyde som øker med bredden på cardet, og beskjæres sentrert. Stående: 12.5rem, 14.375rem fra 20rem bredde og 18.125rem fra 30rem. Liggende: 11.5rem når cardet er stablet, 17.875rem fra 36rem bredde og 18.75rem fra 48rem.
Prop:
tags?
Type:
array
Beskrivelse:
Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text
Prop:
ariaLabel?
Type:
string
Beskrivelse:
Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.

Slots

Slot:
default
Beskrivelse:
Innholdet i card

ICardImage

Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.

Prop:
src
Type:
string
Beskrivelse:
Stien til bildet
Prop:
alt?
Type:
string
Beskrivelse:
Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative

ICardTag

Prop:
skin?
Type:
"blue" | "green" | "red" | "yellow"
Beskrivelse:
Farge på tag
Prop:
iconName?
Type:
icon
Beskrivelse:
Id på ikonet du ønsker å bruke til tag
Prop:
ariaLabel?
Type:
string
Beskrivelse:
Tekst for aria-label
Prop:
text
Type:
string
Beskrivelse:
Tekst på tag