Skip to main content

Stack

Stack er en layout-primitiv for å stable innhold i én dimensjon — vertikalt eller horisontalt. Den fungerer både som custom element (<ix-stack>) og som CSS-klasse (.ix-stack).

Egnet til​

  • Stable seksjoner, kort eller elementer loddrett med jevnt mellomrom
  • Plassere ikoner, etiketter og knapper side om side horisontalt
  • Bygge opp sammensatte layout-strukturer ved å neste stacks

Uegnet til​

  • Todimensjonal layout — bruk CSS Grid og grid-utilities
  • Komplekst innholdsoppsett som artikler og dashboard-views

Kom i gang​

ix-stack har md gap som standard. Bruk gap-attributtet (eller prop) for å overstyre.

Result
Loading...
Kode
Live Editor
<VStack>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 1</div>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 2</div>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 3</div>
</VStack>
Result
Loading...
Kode
Live Editor
<HStack>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 1</div>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 2</div>
  <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Element 3</div>
</HStack>

Eksempler​

Vertikal — align​

Result
Loading...
Kode
Live Editor
<HStack gap="lg">
  <VStack gap="sm" align="start">
    <strong>start (standard)</strong>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
    <div className="ix-color-surface-info-default ix-px-xl ix-py-2xs">Bred</div>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
  </VStack>
  <VStack gap="sm" align="center">
    <strong>center</strong>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
    <div className="ix-color-surface-info-default ix-px-xl ix-py-2xs">Bred</div>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
  </VStack>
  <VStack gap="sm" align="end">
    <strong>end</strong>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
    <div className="ix-color-surface-info-default ix-px-xl ix-py-2xs">Bred</div>
    <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Smal</div>
  </VStack>
</HStack>

Horisontal — align​

Result
Loading...
Kode
Live Editor
<VStack gap="lg">
  <div>
    <strong>center (standard)</strong>
    <HStack gap="sm" align="center">
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-lg">Høy</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
    </HStack>
  </div>
  <div>
    <strong>start</strong>
    <HStack gap="sm" align="start">
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-lg">Høy</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
    </HStack>
  </div>
  <div>
    <strong>end</strong>
    <HStack gap="sm" align="end">
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-lg">Høy</div>
      <div className="ix-color-surface-info-default ix-px-sm ix-py-2xs">Lav</div>
    </HStack>
  </div>
</VStack>

Gap​

Standard gap er md. Bruk gap-prop/-attributt for å overstyre.

Result
Loading...
Kode
Live Editor
<VStack gap="lg">
  <HStack gap="xs">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">A</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">B</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">C</div>
  </HStack>
  <HStack>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">A</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">B</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">C</div>
  </HStack>
  <HStack gap="xl">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">A</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">B</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">C</div>
  </HStack>
  <HStack gap="none">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">A</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">B</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">C</div>
  </HStack>
</VStack>

Universell utforming​

Hva du selv må sørge for​

  • Bruk semantiske elementer når konteksten krever det — ix-stack er et ukjent HTML-element uten semantisk rolle. Nettleseren behandler det som generisk blokkinnhold, på samme måte som <div>. Bruk as-prop i React (f.eks. <HStack as="nav">) eller CSS-klasser direkte på et native element når innholdet krever semantikk.

På native elementer (ikke <ix-stack>) virker ikke attributter — bruk modifier-klasser:

<!-- CSS-klasse på semantisk element — modifier-klasser styrer retning og gap -->
<section class="ix-stack ix-gap-md">
  <h2>Seksjonstittel</h2>
  <p>Innhold her.</p>
</section>

<!-- Tilsvarende med <ix-stack> — her bruker du attributter i stedet for klasser -->
<ix-stack gap="md">...</ix-stack>

WCAG-kriterier​

Sist gjennomgått: 2026-05-11 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier3 ditt ansvar · 0 håndtert · 53 ikke relevant · 0 ikke på plass
Ditt ansvar (3)
KriteriumNivåHva du må gjøre
1.3.1 Informasjon og relasjonerABruk semantiske elementer når konteksten krever det. ix-stack er et ukjent HTML-element uten semantisk rolle — tilsvarende <div>. Nettleseren injiserer ingen ARIA. Bruk et semantisk native element med ix-stack-*-klasser (eller as-prop i React) når innholdet krever det — f.eks. <nav class="ix-stack-horizontal"> for navigasjonslenker, <ul class="ix-stack"> for lister.
1.3.2 Meningsfull rekkefølgeAPass på DOM-rekkefølgen ved reverse-layout. ix-stack[reverse] snur den visuelle rekkefølgen uten å endre DOM-rekkefølgen. Skjermlesere og tastaturnavigasjon følger DOM. Bruk reverse kun der det gir mening uavhengig av presentasjon — aldri for å rette opp feil i innholdsrekkefølgen.
2.4.3 FokusrekkefølgeAPass på DOM-rekkefølgen ved reverse-layout. ix-stack[reverse] snur den visuelle rekkefølgen uten å endre DOM-rekkefølgen. Skjermlesere og tastaturnavigasjon følger DOM. Bruk reverse kun der det gir mening uavhengig av presentasjon — aldri for å rette opp feil i innholdsrekkefølgen.
Ikke relevant (53)
KriteriumNivåHvorfor ikke relevant
1.1.1 Ikke-tekstlig innholdAIngen bilder eller ikke-tekstlig innhold i selve layout-elementet.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)AIngen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)AIngen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)AIngen medieelementer.
1.2.4 Teksting (direkte)AAIngen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)AAIngen medieelementer.
1.3.3 Sensoriske egenskaperAIngen sensoriske karakteristikker brukes for å formidle informasjon.
1.3.4 VisningsretningAAIngen orientasjonslåsing.
1.3.5 Identifiser formål med inndataAAIngen skjemafelt.
1.4.1 Bruk av fargeAFarge brukes ikke for å formidle informasjon.
1.4.2 Styring av lydAIngen lyd.
1.4.3 Kontrast (minimum)AAIngen tekst i selve layout-elementet.
1.4.4 Endre tekststørrelseAAIngen tekst i komponenten. Layout bruker relative enheter og skalerer korrekt.
1.4.5 Bilder av tekstAAIngen bilder av tekst.
1.4.10 OmflytAAFlex-layout med wrap flyter naturlig ved smal viewport.
1.4.11 Kontrast for ikke-tekstlig innholdAAIngen UI-komponenter med krav til ikke-tekstlig kontrast.
1.4.12 TekstavstandAAIngen tekst i selve elementet.
1.4.13 Innhold ved hover eller fokusAAIngen hover/fokus-innhold.
2.1.1 TastaturARent layout-element — ikke fokuserbart.
2.1.2 Ingen tastaturfelleAIngen fokus-felle.
2.1.4 TastatursnarveierAIngen hurtigtaster.
2.2.1 Justerbar hastighetAIngen tidsfrister.
2.2.2 Pause, stopp, skjulAIngen bevegelig eller autooppdatert innhold.
2.3.1 Terskelverdi på tre glimtAIngen blinking eller flimring.
2.4.1 Hoppe over blokkerAIngen blokker som må hoppes over.
2.4.2 SidetitlerAIkke en side-komponent.
2.4.4 Formål med lenke (i kontekst)AIngen lenker i komponenten.
2.4.5 Flere måterAAIkke en navigasjonsstruktur.
2.4.6 Overskrifter og ledeteksterAAIngen overskrifter eller labeler i komponenten.
2.4.7 Synlig fokusAAIkke fokuserbar.
2.4.11 Fokus ikke skjult (minimum)AAIkke fokuserbar.
2.5.1 PekerbevegelserAIngen peker-gester.
2.5.2 Avbryt pekerAIngen peker-kanselleringslogikk.
2.5.3 Label i navnAIngen synlig label.
2.5.4 BevegelsesaktiveringAIngen bevegelsesbasert aktivering.
2.5.6 Samtidige inndatamekanismerAIngen begrensning på input-modalitet.
2.5.7 DrabevegelserAIngen draing-funksjonalitet.
2.5.8 Målstørrelse (minimum)AAIkke et interaktivt mål.
3.1.1 Språk på sidenAIkke en side-komponent.
3.1.2 Språk på deler av innholdAAIngen språkendringer.
3.2.1 Ved fokusAIkke fokuserbar.
3.2.2 Ved inndataAIngen input.
3.2.3 Konsistent navigasjonAAIngen navigasjon.
3.2.4 Konsistent identifikasjonAAIngen gjentagende komponenter med inkonsistent identifisering.
3.2.6 Konsistent hjelpAIngen hjelp-funksjonalitet.
3.3.1 Identifikasjon av feilAIngen skjemavalidering.
3.3.2 Ledetekster eller instruksjonerAIngen skjemafelt.
3.3.3 Forslag ved feilAAIngen feilforslag.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)AAIngen juridisk forpliktende handlinger.
3.3.7 Redundant oppføringAIngen redundant input.
3.3.8 Tilgjengelig autentisering (minimum)AAIngen tilgjengelighetsautentisering.
4.1.2 Navn, rolle, verdiAIkke et interaktivt element — ingen rolle, navn eller tilstand å eksponere.
4.1.3 StatusmeldingerAAIngen statusmeldinger.

Props / API​

HStack​

PropTypeStandardBeskrivelse
asElementTypeRendrer et native element med CSS-klasser i stedet for <ix-stack> med attributter. Bruk for semantikk — f.eks. as="nav".
align'start' | 'center' | 'end''center'Kryssaksejustering av barn
gapGapSize'md'Avstand mellom barn
classNamestringEkstra CSS-klasser
refRef<HTMLElement>Ref til rotelementet

Støtter alle standard HTML-attributter for det rendrede elementet (id, style, data-* osv.).

VStack​

PropTypeStandardBeskrivelse
asElementTypeRendrer et native element med CSS-klasser i stedet for <ix-stack> med attributter. Bruk for semantikk — f.eks. as="ul".
align'start' | 'center' | 'end''start'Kryssaksejustering av barn
gapGapSize'md'Avstand mellom barn
classNamestringEkstra CSS-klasser
refRef<HTMLElement>Ref til rotelementet

Støtter alle standard HTML-attributter for det rendrede elementet (id, style, data-* osv.).

Tilpasning med CSS​

Stack-komponentene har ingen egne CSS custom properties. Bruk ix-justify-* og ix-items-* utility-klasser for ytterligere tilpasning:

<ix-stack horizontal gap="md" class="ix-justify-between">
  <div>Venstre</div>
  <div>Høyre</div>
</ix-stack>

Relatert​

Rapporter feil på denne siden