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.
Live demo
Relaterte komponenter
Når hele cardet kun skal være en lenke uten fleksibelt innhold.
Når du skal vise strukturerte data i kolonner og rader.
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.
| Layout | Bruk |
|---|---|
| Portrait | Innhold stables vertikalt, fungerer godt når du legger flere card ved siden av hverandre |
| Landscape | Når du vil bruke mer av bredden, f.eks. i desktop-visning |
| Skin | Bruk |
|---|---|
| Outlined | Når du vil ramme inn uten bakgrunn |
| Filled | Full bakgrunnsfarge |
| No padding | Fjerner marger inne i cardet |
| Bildestil | Bruk |
|---|---|
| Square | Gir et strammere uttrykk |
| Round | Mer 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
Unngå
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
Unngå
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:
En praktisk og pedagogisk gjennomgang av hvordan cards kan være universelt utformet.
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Label | Overskrift for kortet. Bruk <h3> eller tilsvarende semantikk |
| 2. Brødtekst | Forklarende tekst som utdyper innholdet |
| 3. Bilde | Illustrasjon eller fotografi (valgfritt) |
| 4. Handling | Lenke eller knapp for navigasjon eller videre handling, brukes kun dersom ikke hele cardet er klikkbart (valgfritt) |
| 5. Container | Kortets ramme, med eller uten kantlinje og padding |
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/latest/elements/pkt-card.js" type="module"></script>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
| Prop | Type | Beskrivelse |
|---|---|---|
heading | string | Tittel på card |
headingLevel | 123456 | Nivået på headingen. Brukes for tilgjengelighet. |
subheading | string | Undertittel på card |
layout | verticalhorizontal | Stående/liggende. Portrett/landskap. Horisontal/vertikal. Kjært barn… |
skin | outlinedoutlined-beigegraybluebeigegreen | Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. |
padding | nonedefault | Skal det være padding på innsiden av card? |
metaLead | string | Undertekst med fet skriftvekt |
metaTrail | string | Undertekst med normal skriftvekt |
tagPosition | topbottom | Plassering av tags i card |
clickCardlink | string | Href sendes inn som streng for å gjøre card klikkbart. Heading brukes som lenktetekst. |
openLinkInNewTab | boolean | Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane. |
borderOnHover | boolean | Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov. |
image | object | Bildet på card. Tar inn et objekt av typen {src: string, alt: string}. |
imageShape | squareround | Her kan vi velge om bildet i card skal være firkantet eller rundt. |
tags | array | Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text |
ariaLabel | string | Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i card |
Farger
Card-komponenten støtter flere fargekombinasjoner for å tilpasse ulike behov og kontekster.
| Element | CSS Variabel |
|---|---|
| Background | |
| Border | |
| Text | |