Surface
Surface er flaten flere ting ligger på: en region som samler flere beslektede elementer og skiller dem visuelt fra resten av siden med en egen surface-farge (nøytral eller status), gjerne med border eller avrundede hjørner. Den er bevisst enkel: en ren flate for layout og visuell gruppering, uten klikk-affordanse eller annen interaktivitet.
Surface bygger i sin helhet på utility-klasser, men gir et React-API slik at du slipper å forholde deg til klassenavnene direkte.
Egnet til
- Visuell gruppering av flere beslektede elementer i én flate med farge eller border
- Seksjoner og paneler i et oppsett (sett
as="section"for riktig semantikk) - Bakgrunnsflate for en gruppe elementer, også for flere Card som ligger oppå
- Rask layout med
gap,justifyContentogalignItemsuten egen CSS
Uegnet til
- Klikkbare flater eller navigasjon (bruk Card med
href/onClick) - Innhold som skal fremstå som en avgrenset, klikkbar enhet (bruk Card)
- Komplekse layouter med retning og innrykk (vurder Stack)
Surface vs. Card
Surface og Card virker på ulike nivåer:
- Surface er flaten flere ting ligger på. Den signaliserer ingen interaktivitet. Den samler en gruppe elementer og skiller dem visuelt fra resten av siden. Tenk bakgrunn, seksjon eller panel.
- Card er én ting: en avgrenset, selvstendig innholdsenhet. Det kan være klikkbart og bærer chevron når det er det.
Et Card kan ligge oppå en Surface: de konkurrerer ikke, de virker på ulike nivåer. Trenger du at selve flaten kan trykkes, velg Card. Skal flaten bare gruppere og skille ut innhold, velg Surface.
Bruk
Eksempler
Statusfarger
neutral er den nøytrale standardflaten, og settes eksplisitt med data-status="neutral"
i HTML og status="neutral" i React. Det er standardverdien. .ix-surface uten data-status gir
også den nøytrale flaten (fallback fra :root), men merk at flaten da arver en eventuell data-status
fra en forelder; sett data-status="neutral" for å bryte den arven. De andre statusene (info,
success, warning, danger) settes på samme måte. Det er samme status-system som Card og
Message.
neutral er det eneste navnet på nøytral status. status-colors.css mappet tidligere også
[data-status="default"] til de samme fargene. Det er nå fjernet — default var et andre navn på
samme sak, og data-status="default" gir ikke lenger noen farger. Elementer uten data-status
faller fortsatt tilbake på de nøytrale verdiene via :root.
Nøytralt fyll er grått, ikke blått. fill-main-default er brand-blå, så en nøytral flate ble
blå der fyll var i bruk (synlig i Tag, som har neutral som standardverdi). Nøytral-gruppen
henter derfor --ix-color-status-fill* fra neutral-tieren (grå), mens
--ix-color-status-surface*, --ix-color-status-border og --ix-color-status-foreground henter fra
main-tieren — som allerede er nøytral i verdi (hvit flate, grå kantlinje, nesten svart tekst), og
der det ikke finnes surface-/border-/foreground-neutral-* å bytte til.
Fortsatt åpent: blandingen av tiere over er en konsekvens av navngivningen, ikke et mål i seg
selv. Skal main-tieren døpes om til neutral på tvers av surface/fill/border/foreground (krever
Figma-endring og avklaring mot eksisterende neutral-farger), eller beholder vi main som
token-navn og lever med at API-verdien heter neutral? Ikke løst her.
Avrundede hjørner (radius)
radius mapper til ix-radius-*-utility og finnes i størrelsene xs, sm, md, lg, xl,
pill og circle.
Border
Layout med flex-props
Surface stables som en kolonne i utgangspunktet. Sett direction="row" (HTML: ix-flex-row) når
innholdet skal ligge ved siden av hverandre, og bruk gap, justifyContent og alignItems for
rask layout uten egen CSS.
Universell utforming
Surface er en ikke-interaktiv container og tilfører ingen rolle eller fokus-håndtering selv.
Hva du selv må sørge for
- Velg semantisk element med
asder det er relevant, f.eks.as="section"for en seksjon. Standard<div>er korrekt når flaten kun er visuell gruppering. - Ikke kommuniser mening med farge alene. Statusfargen er dekorativ. Innhold som bærer betydning må også ha tekst eller annet ikke-visuelt signal.
- Trenger flaten å være klikkbar, er Surface feil verktøy. Bruk Card, som gir
riktig semantikk (
<a>/<button>), tastaturstøtte og fokusring.
WCAG-kriterier
Sist gjennomgått: 2026-07-08 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier4 ditt ansvar · 5 håndtert · 50 ikke relevant · 0 ikke på plass
Ditt ansvar (4)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Bruk semantiske elementer når konteksten krever det. .ix-surface er som standard en <div> uten semantisk rolle. Sett as-prop i React (eller bruk et semantisk native element med .ix-surface-klassen i HTML) når innholdet krever det — f.eks. as="section" for en seksjon. Standard <div> er korrekt når flaten kun er visuell gruppering. |
| 1.4.1 Bruk av farge | A | Ikke kommuniser mening med farge alene. Statusfargen (data-status="neutral|info|success|warning|danger") er rent dekorativ og kan ikke oppfattes av alle. Innhold som bærer betydning må også ha tekst eller et annet ikke-visuelt signal — ikke stol på flatefargen alene for å formidle status. |
| 4.1.2 Navn, rolle, verdi | A | Bruk Card for klikkbare flater. Surface er en ikke-interaktiv container og tilfører verken rolle, tastaturstøtte eller fokusring. Trenger flaten å være klikkbar, er Surface feil verktøy — bruk Card, som gir riktig semantikk (<a>/<button>), tastaturstøtte og fokusring. |
| 2.1.1 Tastatur | A | Bruk Card for klikkbare flater. Surface er en ikke-interaktiv container og tilfører verken rolle, tastaturstøtte eller fokusring. Trenger flaten å være klikkbar, er Surface feil verktøy — bruk Card, som gir riktig semantikk (<a>/<button>), tastaturstøtte og fokusring. |
Håndtert av komponenten (5)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Innholdet følger naturlig leserekkefølge i DOM. Standard <div>, eller valgt semantisk element via as-prop. |
| 1.3.2 Meningsfull rekkefølge | A | Innholdet følger DOM-rekkefølgen; flex-retning endrer ikke leserekkefølgen. |
| 1.4.1 Bruk av farge | A | Statusfargen er dekorativ og formidler ikke informasjon alene — betydning må bæres av innholdet. |
| 1.4.4 Endre tekststørrelse | AA | Bruker relative enheter (spacing- og radius-tokens) — skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Flex-basert flate uten fast bredde flyter naturlig ved 320 px viewport uten horisontal scroll. |
Ikke relevant (50)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Ingen bilder eller ikke-tekstlig innhold i selve flaten; innhold 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.3 Sensoriske egenskaper | A | Ingen sensoriske karakteristikker brukes for å formidle informasjon. |
| 1.3.4 Visningsretning | AA | Ingen orientasjonslåsing. |
| 1.3.5 Identifiser formål med inndata | AA | Ikke et skjemafelt. |
| 1.4.2 Styring av lyd | A | Ingen lyd. |
| 1.4.3 Kontrast (minimum) | AA | Ingen egen tekst i flaten; tekstkontrast er innholdets ansvar. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Ikke-interaktiv flate uten UI-komponenter med krav til ikke-tekstlig kontrast. |
| 1.4.12 Tekstavstand | AA | Ingen egen tekst i flaten. |
| 1.4.13 Innhold ved hover eller fokus | AA | Ingen hover/fokus-innhold. |
| 2.1.1 Tastatur | A | Ikke-interaktiv container — ikke fokuserbar. |
| 2.1.2 Ingen tastaturfelle | A | Ingen fokus-felle. |
| 2.1.4 Tastatursnarveier | A | Ingen hurtigtaster. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsfrister. |
| 2.2.2 Pause, stopp, skjul | A | Ingen bevegelig eller autooppdatert innhold. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinking eller flimring. |
| 2.4.1 Hoppe over blokker | A | Ingen blokker som må hoppes over. |
| 2.4.2 Sidetitler | A | Ikke en side-komponent. |
| 2.4.3 Fokusrekkefølge | A | Ikke fokuserbar; endrer ikke fokusrekkefølge. |
| 2.4.4 Formål med lenke (i kontekst) | A | Ingen lenker i selve flaten. |
| 2.4.5 Flere måter | AA | Ikke en navigasjonsstruktur. |
| 2.4.6 Overskrifter og ledetekster | AA | Ingen overskrifter eller labeler i selve flaten. |
| 2.4.7 Synlig fokus | AA | Ikke fokuserbar. |
| 2.4.11 Fokus ikke skjult (minimum) | AA | Ikke fokuserbar. |
| 2.5.1 Pekerbevegelser | A | Ingen peker-gester. |
| 2.5.2 Avbryt peker | A | Ingen peker-kanselleringslogikk. |
| 2.5.3 Label i navn | A | Ingen synlig label. |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesbasert aktivering. |
| 2.5.6 Samtidige inndatamekanismer | A | Ingen begrensning på input-modalitet. |
| 2.5.7 Drabevegelser | A | Ingen draing-funksjonalitet. |
| 2.5.8 Målstørrelse (minimum) | AA | Ikke et interaktivt mål. |
| 3.1.1 Språk på siden | A | Ikke en side-komponent. |
| 3.1.2 Språk på deler av innhold | AA | Ingen språkendringer. |
| 3.2.1 Ved fokus | A | Ikke fokuserbar. |
| 3.2.2 Ved inndata | A | Ingen input. |
| 3.2.3 Konsistent navigasjon | AA | Ingen navigasjon. |
| 3.2.4 Konsistent identifikasjon | AA | Ingen gjentagende komponenter med inkonsistent identifisering. |
| 3.2.6 Konsistent hjelp | A | Ingen hjelp-funksjonalitet. |
| 3.3.1 Identifikasjon av feil | A | Ingen skjemavalidering. |
| 3.3.2 Ledetekster eller instruksjoner | A | Ingen skjemafelt. |
| 3.3.3 Forslag ved feil | AA | Ingen feilforslag. |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Ingen juridisk forpliktende handlinger. |
| 3.3.7 Redundant oppføring | A | Ingen redundant input. |
| 3.3.8 Tilgjengelig autentisering (minimum) | AA | Ingen tilgjengelighetsautentisering. |
| 4.1.3 Statusmeldinger | AA | Flaten genererer ingen statusmeldinger selv. |
Props / API
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
as | ElementType | 'div' | Hvilket HTML-element flaten rendres som (f.eks. 'section') |
status | Status | 'neutral' | Statusfarge; settes som data-status. neutral gir den nøytrale flaten, ellers info / success / warning / danger |
border | 'default' | 'dashed' | Kantlinjestil | |
radius | Radius | Avrundede hjørner: xs / sm / md / lg / xl / pill / circle | |
padding | Size | Indre luft (også paddingX/paddingY/paddingTop osv.) | |
margin | Size | Ytre luft (også marginX/marginY osv.) | |
direction | 'row' | 'column' | 'column' | Retning på flex-innholdet. Sett 'row' for innhold ved siden av hverandre |
gap | Size | Avstand mellom barn (flex) | |
justifyContent | 'start' | 'end' | 'center' | 'space-between' | Justering langs hovedaksen | |
alignItems | 'start' | 'end' | 'center' | 'baseline' | Justering på tvers | |
fullWidth | boolean | false | Strekker flaten til full bredde |
className | string | Ekstra klasser |
I tillegg støttes standard HTML-attributter, som settes direkte på det rendrede elementet.
Tilpasning med CSS
Trenger du flaten uten React-komponenten, bruk klassene direkte. .ix-surface gir den nøytrale flaten alene;
statusfarge kobles med data-status, resten er utility-klasser:
| Egenskap | Klasse / attributt |
|---|---|
| Flate (base, nøytral) | .ix-surface |
| Statusfarge | data-status="neutral|info|success|warning|danger" |
| Border | .ix-border-default / .ix-border-dashed |
| Radius | .ix-radius-{xs|sm|md|lg|xl|pill|circle} |
| Spacing | .ix-p-* / .ix-m-* |
| Retning | .ix-flex-row / .ix-flex-col |
| Justering | .ix-justify-{start|center|end|between} / .ix-items-{start|center|end|baseline} |
| Gap | .ix-gap-* |
<section class="ix-surface ix-radius-md ix-p-md" data-status="info">
<h3>Tittel</h3>
<p>Innhold</p>
</section>
Relatert
- Card — avgrenset, evt. klikkbart innholdskort
- Stack — layout-primitiver for retning og avstand
- Utility-klasser — klassene Surface bygger på