Card
Card grupperer relatert innhold i en avgrenset flate. 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
Statisk vs. klikkbart — og hvorfor det er synlig på mobil
Et klikkbart kort må se annerledes ut enn et statisk kort uten at man trenger å peke på det. På desktop kan klikkbarhet antydes med hover, men hover finnes ikke på touch. Derfor bærer det klikkbare kortet sin affordanse i hviletilstand:
- Chevron (›) — et eksplisitt «dette gjør noe»-signal, synlig hele tiden. Dette er hovedsignalet: en form, ikke bare en farge, så det holder også kontrastkravet.
- Hover — på desktop får kortet en bakgrunns-tint når du peker på det.
- Pressed-state — ved trykk får kortet en tint, som bekrefter klikket på touch.
- Fokusring — synlig for tastaturbrukere via
:focus-visible.
Du aktiverer klikkbart kort ved å sette href (navigasjon → <a>) eller onClick (handling →
<button>). Chevronen legges på automatisk.
Kom i gang
Kode
<Card padding="md"> <Heading as="h3" size="sm">Statisk kort</Heading> <Text>Et kort uten href eller onClick er bare en beholder.</Text> </Card>
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.
Kode
<HStack gap="md"> <Card padding="md"> <Heading as="h3" size="sm">Statisk</Heading> <Text>Flat, ingen chevron.</Text> </Card> <Card padding="md" href="https://www.sparebank1.no"> <Heading as="h3" size="sm">Klikkbart</Heading> <Text>Chevron i hviletilstand, helt uten hover.</Text> </Card> </HStack>
Som lenke (navigasjon)
Sett href når kortet navigerer til en URL. Det rendres som <a> og får riktig lenke-semantikk.
Kode
<Card padding="md" href="https://www.sparebank1.no"> <Heading as="h3" size="sm">Sparekonto</Heading> <Text>Se saldo og renter</Text> </Card>
Som knapp (handling)
Sett onClick når kortet utfører en handling. Det rendres som <button>.
Kode
<Card padding="md" onClick={() => alert('Kort klikket')}> <Heading as="h3" size="sm">Vis detaljer</Heading> <Text>Åpner et panel</Text> </Card>
Eget chevron-ikon
Klikkbart kort viser pil-hoyre som standard. Sett chevronIcon for å bytte ikon.
Kode
<Card padding="md" href="https://www.sparebank1.no" chevronIcon="apne-ekstern"> <Heading as="h3" size="sm">Åpner i ny fane</Heading> <Text>Chevronen er byttet til et eksternt-lenke-ikon.</Text> </Card>
Retningslinjer
Skill statisk og klikkbart tydelig
Et klikkbart kort skal alltid bære en chevron — ikke gjør et statisk kort trykkbart uten å gi det dette signalet. Skill aldri klikkbart fra statisk kun på farge eller kantlinje; det er for svakt på touch og bryter med kontrastkrav. Chevronen er en form, ikke bare en farge, og holder derfor kontrastkravet.
Bruk riktig semantikk: navigasjon vs. handling
Bruk href når kortet fører brukeren til en ny side, og onClick når kortet utfører en handling
i grensesnittet. Dette samsvarer med brukerens forventning og gir riktig skjermleser-annonsering
(«lenke» vs. «knapp»).
Ikke nøst interaktive elementer
Et klikkbart kort er allerede en lenke eller knapp. Å plassere knapper eller lenker inni gir ugyldig, nøstet interaktivt innhold. Trenger du flere handlinger, bruk et statisk kort med egne knapper i stedet — ikke gjør hele flaten klikkbar.
Gi nok klikkflate
Hele kortet er trykkbart. Gi kortet tilstrekkelig padding slik at klikkflaten blir komfortabel
på touch (sikt mot minst 44×44 px).
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 | 'pil-hoyre' | Ikon for affordanse-chevronen på klikkbart kort |
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
| 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="pil-hoyre" 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="pil-hoyre" data-size="lg" aria-hidden="true"></ix-icon>
</a>