aksel-spacing

Aksel: Responsivt layout med spacing tokens

Referanse for å bygge responsive layouts med Aksel v8+. Hent oppdatert dokumentasjon fra https://aksel.nav.no/llm.md ved behov.

v8-BRUDD: Tokens = pixelverdi direkte. --ax-space-4 = 4px (ikke 16px!). Bruk alltid tallverdien som matcher ønsket px.

---

Spacing-tokens

Token name = eksakt pikselverdi. Full referanse: design-tokens

CSS-variabler

.my-element {
  padding: var(--ax-space-16); /* 16px */
  gap: var(--ax-space-8); /* 8px */
  margin-block: var(--ax-space-32); /* 32px */
  padding-inline: var(--ax-space-24) var(--ax-space-48);
}

---

Breakpoints og ResponsiveProp

Alle layout-primitives aksepterer responsiv objektverdi (mobil-first). Full referanse: brekkpunkter

// ResponsiveProp-syntaks – verdi per breakpoint (mobil-first)
<HStack gap={{ xs: "space-8", md: "space-24" }} />
<Box padding={{ xs: "space-16", md: "space-32", lg: "space-48" }} />
<HGrid columns={{ xs: 1, sm: 2, lg: 3 }} />

Utelatte breakpoints arver fra nærmeste definerte nedenfra.

---

Layout Primitives

Box

Fleksibelt layout-element. Brukes til padding, bakgrunn, border og posisjonering.

Props: padding, paddingBlock, paddingInline, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, margin, marginBlock, marginInline, width, height, minWidth, maxWidth, overflow, background, borderColor, borderWidth, borderRadius, shadow, as, asChild

import { Box } from "@navikt/ds-react";

<Box padding="space-16">Innhold</Box>

// Responsiv padding
<Box
  padding={{ xs: "space-16", md: "space-32" }}
  paddingInline={{ xs: "space-16", lg: "space-48" }}
>
  Innhold
</Box>

// asChild – send props til eksisterende element
<Box asChild padding="space-24">
  <main>Innhold</main>
</Box>