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, justifyContent og alignItems uten 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.

Kom i gang

Result

Loading...

Kode

Live Editor

<div class="ix-surface ix-radius-md ix-p-md ix-gap-sm" data-status="info">
  <h3>Kontoutdrag</h3>
  <p>Surface samler flere beslektede elementer på én flate — skilt visuelt fra siden.</p>
  <div class="ix-card ix-p-md">
    <strong>Brukskonto</strong>
    <p>12 480,50 kr</p>
  </div>
  <div class="ix-card ix-p-md">
    <strong>Sparekonto</strong>
    <p>85 000,00 kr</p>
  </div>
</div>

Result

Loading...

Kode

Live Editor

<Surface status="info" radius="md" padding="md" gap="sm">
  <Heading as="h3" size="sm">Kontoutdrag</Heading>
  <Text>Surface samler flere beslektede elementer på én flate — skilt visuelt fra siden.</Text>
  <Card padding="md">
    <Heading as="h4" size="xs">Brukskonto</Heading>
    <Text>12 480,50 kr</Text>
  </Card>
  <Card padding="md">
    <Heading as="h4" size="xs">Sparekonto</Heading>
    <Text>85 000,00 kr</Text>
  </Card>
</Surface>

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 — samme status-system som Card og Message.

Til diskusjon i teamet: trenger vi både default og neutral?

status-colors.css mapper både [data-status="default"] og [data-status="neutral"] til den samme nøytrale flaten. React-komponentene bruker neutral som den kanoniske nøytral-verdien. default har dermed ingen reell bruk — den peker bare på de samme fargene.

Spørsmål: bør vi beholde begge, eller fjerne default og kun bruke neutral (ett navn, mindre forvirring)? Avklares før flere komponenter tar i bruk status-systemet.

Bredere: selve token-navnet er fortsatt --ix-color-surface-main-* (Figma-synket, i familie med surface-info/success/…). Komponent-API-et bruker nå neutral, mens token-tieren heter main. Samtidig finnes neutral allerede som et eget begrep andre steder (f.eks. fill-neutral ≠ fill-main). Spørsmål til teamet: 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.

Result

Loading...

Kode

Live Editor

<ix-stack>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="neutral">Neutral</div>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="info">Info</div>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="success">Suksess</div>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="warning">Advarsel</div>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="danger">Fare</div>
</ix-stack>

Result

Loading...

Kode

Live Editor

<VStack gap="md">
  <Surface status="neutral" radius="md" padding="md">Neutral</Surface>
  <Surface status="info" radius="md" padding="md">Info</Surface>
  <Surface status="success" radius="md" padding="md">Suksess</Surface>
  <Surface status="warning" radius="md" padding="md">Advarsel</Surface>
  <Surface status="danger" radius="md" padding="md">Fare</Surface>
</VStack>

Avrundede hjørner (radius)

radius mapper til ix-radius-*-utility og finnes i størrelsene xs, sm, md, lg, xl, pill og circle.

Result

Loading...

Kode

Live Editor

<ix-stack horizontal>
  <div class="ix-surface ix-radius-sm ix-p-md" data-status="info">sm</div>
  <div class="ix-surface ix-radius-md ix-p-md" data-status="info">md</div>
  <div class="ix-surface ix-radius-lg ix-p-md" data-status="info">lg</div>
</ix-stack>

Result

Loading...

Kode

Live Editor

<HStack gap="md">
  <Surface status="info" radius="sm" padding="md">sm</Surface>
  <Surface status="info" radius="md" padding="md">md</Surface>
  <Surface status="info" radius="lg" padding="md">lg</Surface>
</HStack>

Border

Result

Loading...

Kode

Live Editor

<ix-stack horizontal>
  <div class="ix-surface ix-border-default ix-radius-md ix-p-md">default</div>
  <div class="ix-surface ix-border-dashed ix-radius-md ix-p-md">dashed</div>
</ix-stack>

Result

Loading...

Kode

Live Editor

<HStack gap="md">
  <Surface border="default" radius="md" padding="md">default</Surface>
  <Surface border="dashed" radius="md" padding="md">dashed</Surface>
</HStack>

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.

Result

Loading...

Kode

Live Editor

<div class="ix-surface ix-border-default ix-radius-md ix-p-md ix-flex-row ix-gap-sm ix-justify-between">
  <p>Venstre</p>
  <p>Høyre</p>
</div>

Result

Loading...

Kode

Live Editor

<Surface
  border="default"
  radius="md"
  padding="md"
  direction="row"
  gap="sm"
  justifyContent="space-between"
>
  <Text>Venstre</Text>
  <Text>Høyre</Text>
</Surface>

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>

Universell utforming

Surface er en ikke-interaktiv container og tilfører ingen rolle eller fokus-håndtering selv.

• Velg semantisk element med as der 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.

Relatert

• Card — avgrenset, evt. klikkbart innholdskort
• Stack — layout-primitiver for retning og avstand
• Utility-klasser — klassene Surface bygger på