Card
Card er én ting: en avgrenset, selvstendig innholdsenhet med fast ramme og bakgrunn. Et kort kan være rent statisk (en beholder for innhold) eller klikkbart (navigerer til en side eller utfører en handling).
Egnet til
- Gruppere relatert innhold i en visuelt avgrenset enhet
- Klikkbare inngangsporter til detaljsider (f.eks. en konto, et produkt)
- Lister av likeverdige valg der hele flaten skal være trykkbar
Uegnet til
- Som erstatning for en knapp i et skjema — bruk Button
- Dypt nøstede interaktive elementer inni et klikkbart kort (ugyldig HTML)
- Når innholdet ikke hører naturlig sammen — da skaper kortet falsk gruppering
- Kun en flate å gruppere eller skille ut flere elementer på, uten avgrensning eller klikk — bruk Surface
Bruk
Eksempler
Statisk vs. klikkbart side om side
Legg merke til at det klikkbare kortet har en chevron allerede i hviletilstand — du trenger ikke peke på det for å forstå at det kan trykkes.
Som lenke (navigasjon)
Sett href når kortet navigerer til en URL. Det rendres som <a> og får riktig lenke-semantikk.
Som knapp (handling)
Bruk et <button> når kortet utfører en handling. I React rendres <button> når du gir onClick.
Eget chevron-ikon
Klikkbart kort viser chevron_right som standard. Sett chevronIcon for å bytte ikon. Skal kortet
faktisk åpne lenken i ny fane, setter du openInNewTab (som gir target="_blank") — og bytter
chevronen til open_in_new som visuelt signal. I ren HTML setter du target/rel og
chevron-ikonet selv.
Retningslinjer
Vis klikkbarheten i hviletilstand
Et klikkbart kort må se annerledes ut enn et statisk kort før noen peker på det. På desktop kan hover antyde det, men hover finnes ikke på touch. Derfor bærer det klikkbare kortet signalene sine hele tiden:
- Chevron (›): hovedsignalet, alltid synlig. En form, ikke bare en farge, så det holder kontrastkravet.
- Hover gir kortet en bakgrunns-tint på desktop.
- Pressed-tint bekrefter trykket på touch.
- Fokusring vises for tastaturbrukere via
:focus-visible.
Ikke skill klikkbart fra statisk på farge eller kantlinje alene. Det er for svakt på touch, og det faller igjennom på kontrastkrav.
Sett href for navigasjon, onClick for handling
href gir en <a> og fører brukeren til en ny side. onClick gir en <button> og gjør
noe i grensesnittet. Skjermleseren annonserer «lenke» eller «knapp» ut fra det du velger, og
chevronen legges på automatisk i begge tilfeller.
Ikke nøst interaktive elementer
Et klikkbart kort er selv en lenke eller en knapp, og knapper inni knapper er ugyldig HTML. Trenger innholdet flere handlinger, bruk et statisk kort med egne knapper og la flaten være i fred.
Gi nok klikkflate
Hele kortet er trykkbart, så padding er det som bestemmer hvor stort målet blir. Sikt mot
minst 44 × 44 px, som er terskelen for komfortabel treffsikkerhet på touch.
Universell utforming
Hva du selv må sørge for
- Velg
hrefelleronClickbevisst. Navigasjon skal være<a>, handling skal være<button>. Komponenten velger element basert på hvilken du gir. - Gi kortet et meningsfylt navn. Innholdet blir det tilgjengelige navnet. Rent visuelle kort
trenger
aria-label. - Ikke nøst interaktive elementer inni et klikkbart kort.
- Ikke skill klikkbart fra statisk kun med farge. Chevronen gjør jobben, og må ikke fjernes.
Hva komponenten gjør automatisk
- Semantisk element:
<a>vedhref,<button>vedonClick, ellers<div>. - Tastaturstøtte: native element gir Enter/Space-aktivering og tab-rekkefølge gratis.
- Fokusindikator via
:focus-visible— synlig for tastatur, ikke for mus. - Touch-synlig affordanse: chevron i hviletilstand, pressed-state ved
:active. - Redusert bevegelse: transition og skalering deaktiveres ved
prefers-reduced-motion.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til det klikkbare kortet |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Enter | Aktiverer kortet (lenke og knapp) |
| Space | Aktiverer kortet når det er en knapp (onClick) |
Skjermleser
- Klikkbart kort med href: "[innhold], lenke"
- Klikkbart kort med onClick: "[innhold], knapp"
- Statisk kort: ingen interaktiv annonsering — leses som vanlig innhold
WCAG-kriterier
Sist gjennomgått: 2026-06-30 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier8 ditt ansvar · 11 håndtert · 23 ikke relevant · 0 ikke på plass
Ditt ansvar (8)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 1.4.1 Bruk av farge | A | Gjør klikkbarhet synlig uten hover. På touch finnes ikke :hover. Et klikkbart kort må derfor signalisere klikkbarhet i hviletilstand — komponenten gir en chevron automatisk via .ix-card--clickable. Ikke skjul klikkbarhet bak hover alene. |
| 1.3.1 Informasjon og relasjoner | A | Gjør klikkbarhet synlig uten hover. På touch finnes ikke :hover. Et klikkbart kort må derfor signalisere klikkbarhet i hviletilstand — komponenten gir en chevron automatisk via .ix-card--clickable. Ikke skjul klikkbarhet bak hover alene. |
| 4.1.2 Navn, rolle, verdi | A | Bruk href for navigasjon, onClick for handling. Sett href når kortet navigerer til en URL (rendres som <a>), og onClick når kortet utfører en handling (rendres som <button>). Ikke legg click-handlers på et statisk kort uten å gi det riktig semantikk. |
| 2.4.4 Formål med lenke (i kontekst) | A | Gi kortet et meningsfylt tilgjengelig navn. Innholdet i kortet blir det tilgjengelige navnet for lenken/knappen. Sørg for at kortet inneholder beskrivende tekst, eller sett aria-label dersom innholdet er rent visuelt. |
| 4.1.2 Navn, rolle, verdi | A | Gi kortet et meningsfylt tilgjengelig navn. Innholdet i kortet blir det tilgjengelige navnet for lenken/knappen. Sørg for at kortet inneholder beskrivende tekst, eller sett aria-label dersom innholdet er rent visuelt. |
| 4.1.1 4.1.1 | ? | Unngå interaktive elementer inni et klikkbart kort. Et klikkbart kort er allerede en lenke eller knapp. Å plassere knapper eller lenker inni gir nøstede interaktive elementer, som er ugyldig HTML og forvirrer skjermlesere. Bruk Card.Action eller del opp innholdet. |
| 2.1.1 Tastatur | A | Unngå interaktive elementer inni et klikkbart kort. Et klikkbart kort er allerede en lenke eller knapp. Å plassere knapper eller lenker inni gir nøstede interaktive elementer, som er ugyldig HTML og forvirrer skjermlesere. Bruk Card.Action eller del opp innholdet. |
| 2.5.8 Målstørrelse (minimum) | AA | Sørg for tilstrekkelig klikkflate. Hele kortet er klikkbart, men sikre at kortet og dets indre handlingsflater er minst 24×24 px (helst 44×44 px på touch). Gi kortet nok padding. |
Håndtert av komponenten (11)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Klikkbart kort bruker native <a> eller <button> med implisitt rolle. Statisk kort er en <div> uten interaktiv semantikk. |
| 1.3.2 Meningsfull rekkefølge | A | Innholdet følger naturlig leserekkefølge i DOM. |
| 1.4.1 Bruk av farge | A | Klikkbarhet kommuniseres med chevron, ikke farge alene — synlig også på touch uten hover. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter — skalerer korrekt ved 200 % zoom. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Fokusindikator oppfyller 3:1 kontrastkrav via outline-token. |
| 2.1.1 Tastatur | A | Native <a>/<button> aktiveres med Enter (og Space for button). Fullt opererbart med tastatur. |
| 2.1.2 Ingen tastaturfelle | A | Fokus kan navigeres ut med Tab og Shift+Tab. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator via :focus-visible med outline-token. |
| 2.5.8 Målstørrelse (minimum) | AA | Hele kortet er klikkflate; med anbefalt padding overstiges 24×24 px. |
| 3.2.1 Ved fokus | A | Fokus trigger ingen kontekstendring. |
| 4.1.2 Navn, rolle, verdi | A | Native element gir implisitt rolle (link/button) og tilgjengelig navn fra innhold. |
Ikke relevant (23)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Kortet har ikke ikke-tekstlig innhold i seg selv; bilder er konsumentens ansvar. |
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.4 Teksting (direkte) | AA | Ingen medieelementer. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Ingen medieelementer. |
| 1.3.5 Identifiser formål med inndata | AA | Ikke et skjemafelt som ber om personlig informasjon. |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 2.1.4 Tastatursnarveier | A | Ingen egendefinerte tastatursnarveier. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensede funksjoner. |
| 2.2.2 Pause, stopp, skjul | A | Ingen animasjon eller automatisk oppdatering. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende eller glimtende innhold. |
| 2.4.1 Hoppe over blokker | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.2 Sidetitler | A | Sidetittel er ikke kortets ansvar. |
| 3.1.1 Språk på siden | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.1.2 Språk på deler av innhold | AA | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| 3.2.2 Ved inndata | A | Kortet trigger ingen automatisk kontekstendring ved fokus. |
| 3.3.1 Identifikasjon av feil | A | |
| 3.3.2 Ledetekster eller instruksjoner | A | |
| 3.3.3 Forslag ved feil | AA | |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| 4.1.3 Statusmeldinger | AA | Kortet genererer ingen statusmeldinger selv. |
Props / API
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
href | string | Gjør kortet til en lenke (<a>) for navigasjon. Aktiverer klikkbar styling | |
onClick | (e) => void | Gjør kortet til en knapp (<button>) for handling. Aktiverer klikkbar styling | |
chevronIcon | IconName | 'chevron_right' | Ikon for affordanse-chevronen på klikkbart kort |
openInNewTab | boolean | Åpner href-lenken i ny fane (target="_blank" + rel="noopener noreferrer"). Kun sammen med href | |
padding | Size | Indre luft via ix-p-*-klasse | |
className | string | Ekstra klasser |
I tillegg støttes standard HTML-attributter, som settes direkte på det rendrede elementet
(<a>, <button> eller <div>). Card.Action brukes for en egen handlingsflate inni kortet.
Tilpasning med CSS
Trenger du ix-card-stylingen på HTML du setter sammen selv, uten React-komponenten, kan du
bruke klassene direkte. Husk at klikkbart kort skal være et <a> eller <button>.
Tilgjengelige klasser og selektorer
| Element/tilstand | Selektor |
|---|---|
| Kort | .ix-card |
| Klikkbart kort (flat, sentrert chevron) | .ix-card--clickable |
| Chevron-ikon | .ix-card__chevron (et ix-icon) |
.ix-card har kantlinje som standard — ingen ekstra klasse trengs. Klikkbart kort trenger et
chevron-ikon som siste barn: <ix-icon class="ix-card__chevron" name="chevron_right" aria-hidden="true">.
Eksempel: ren HTML
<!-- Statisk -->
<div class="ix-card ix-p-md">
<h3>Tittel</h3>
<p>Innhold</p>
</div>
<!-- Klikkbart (navigasjon) -->
<a class="ix-card ix-card--clickable ix-p-md" href="/konto">
<h3>Sparekonto</h3>
<p>Se saldo</p>
<ix-icon class="ix-card__chevron" name="chevron_right" data-size="lg" aria-hidden="true"></ix-icon>
</a>