Spacing og layout i Jøkul

Konsistent spacing er det som gjør et grensesnitt rolig og lesbart. Jøkul definerer en navngitt spacing-skala basert på en 8-punkts grid, eksponert som CSS-variabler og som props på layout-komponentene Flex.

Spacing-skalaen

Jøkul bruker navngitte spacing-trinn fra 3xs til 3xl. Navngivingen gjør det intuitivt å velge riktig størrelse uten å huske pikselsverdier:

--jkl-spacing-3xs — 2px

Mikroavstand. Brukes for å skille svært nært relaterte elementer, som ikon og etikett side om side.

--jkl-spacing-2xs — 4px

Svært liten avstand. Intern padding i kompakte komponenter som Tags og Badges.

--jkl-spacing-xs — 8px

Liten avstand. Gap mellom elementer i tett gruppert innhold, f.eks. radio-knapper i en liste.

--jkl-spacing-s — 12px

Halvmiddels avstand. Padding inne i kompakte komponenter som knapper og skjemafelter.

--jkl-spacing-m — 16px

Standardavstand. Basislinje for de fleste komponenter — padding, gap og margin mellom relaterte seksjoner. Tilsvarer 1rem.

--jkl-spacing-l — 24px

Stor avstand. Brukes mellom kortene i en kortliste, mellom skjemafelt-grupper og under overskrifter.

--jkl-spacing-xl — 32px

Svært stor avstand. Mellom semantiske seksjoner på en side, f.eks. mellom «Kontaktinformasjon» og «Betalingsdetaljer» i et skjema.

--jkl-spacing-2xl — 48px

Ekstra stor avstand. Mellom tematisk atskilte deler av en side, f.eks. mellom hero-seksjon og innholdsseksjon.

--jkl-spacing-3xl — 64px

Maksimalavstand. Mellom store layoutblokker, sidehoder og sidefot.

Når skal du bruke gap, margin eller padding?

En vanlig kilde til inkonsistens er å blande margin, padding og gap uten et tydelig system. Her er tommelfingerreglene i Jøkul:

gap

Avstand mellom søsken-elementer i en Flex- eller Grid-container. Foretrekk alltid gap fremfor margin når du har kontroll over containeren. Eksempel: avstand mellom knapper i en knapperad, mellom kort i en kortliste.

padding

Avstand inne i en komponent eller beholder, mellom kanten og innholdet. Eksempel: innvendig luft i et kort, padding rundt teksten i en knapp.

margin

Avstand utenfor en komponent, mellom komponenten og omgivelsene. Bruk margin når du ikke kontrollerer containeren — f.eks. for å dytte en overskrift ned fra toppen av siden. Unngå margin-collapse-problemer ved å foretrekke gap i alle flex-/grid-kontekster.

Flex-komponenten

Jøkul tilbyr en Flex-komponent som er en tynn wrapper rundt CSS Flexbox med innebygd støtte for spacing-tokens via gap-propen:

import { Flex } from "@fremtind/jokul/flex";

// Horisontal rad med medium gap
<Flex gap="m" align="center">
  <Icon name="check" />
  <span>Betaling godkjent</span>
</Flex>

// Vertikal kolonne med stor gap
<Flex direction="column" gap="l">
  <SkjemaFelt label="Navn" />
  <SkjemaFelt label="E-post" />
  <SkjemaFelt label="Telefon" />
</Flex>

// Wrap med liten gap (f.eks. tags)
<Flex gap="xs" wrap="wrap">
  <Tag>React</Tag>
  <Tag>TypeScript</Tag>
  <Tag>Jøkul</Tag>
</Flex>

Tilgjengelige props på Flex

gap

Avstand mellom barn-elementer. Tar alle spacing-tokens: «3xs» | «2xs» | «xs» | «s» | «m» | «l» | «xl» | «2xl» | «3xl».

direction

«row» (standard) eller «column». Setter flex-direction.

align

Kryssaksejustering (align-items): «start» | «center» | «end» | «stretch» | «baseline».

justify

Hovedaksejustering (justify-content): «start» | «center» | «end» | «space-between» | «space-around» | «space-evenly».

wrap

«wrap» | «nowrap» | «wrap-reverse». Setter flex-wrap.

Responsiv spacing

Spacing-tokenene er faste verdier (ikke responsive), men du kan justere dem med media queries:

.min-seksjon {
  padding: var(--jkl-spacing-l);
}

@media (max-width: 768px) {
  .min-seksjon {
    padding: var(--jkl-spacing-m);
  }
}

For Flex-komponenten kan du bruke standard breakpoint-klasser eller betinget rendering via React:

const isMobile = useMediaQuery("(max-width: 768px)");

<Flex
  direction={isMobile ? "column" : "row"}
  gap={isMobile ? "m" : "l"}
>
  ...
</Flex>

Spacing i praksis — eksempler

• Mellom skjemafelt: gap="l" (24px) mellom hvert inndatafelt i en vertikal liste.
• Mellom knapper i en rad: gap="s" (12px) — nok luft uten at knappene virker urelaterte.
• Innvendig padding i kort: padding: var(--jkl-spacing-l) (24px) gir kortet pusterom uten å bli for luftig.
• Mellom sidehode og innhold: margin-bottom: var(--jkl-spacing-2xl) (48px) gir tydelig visuelt skille.
• Ikon ved siden av tekst: gap="3xs" (2px) eller gap="2xs" (4px) — ikonet skal oppleves som del av teksten.