Menu
Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Mønster for å kombinere flere API-hooks til én asynkron laster (useInitialData + InitialDataLoader) i sif-soknad-apper.
Legg til et nytt steg i en søknadsapp som bruker @sif/soknad og @sif/rhf — oppretter alle filer og oppdaterer config/routing/i18n.
Arkitekturreferanse og beslutningslogg for @sif/soknad-app — rammeverket for søknadsapper i sif-brukerdialog.
Sett opp OppsummeringSteg i en v2-app — DTO-basert oppsummering med FormSummary, bekreftelsescheckbox og i18n-nøkler.
Veiledning for oppsett av en ny søknadsapp med @sif/soknad-app — SøknadRouter, SøknadAppProvider, AppContext og routing shell.
Implementer et vedleggssteg i en v2-app — VedleggPanel, PersistedVedlegg, hydration og MSW-handlere.
| name | aksel-spacing |
| type | referanse |
| description | Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid |
Box, VStack, HStack eller HGrid.p-, m-, px-, py-) med Aksel-komponenter. Bruk alltid Aksel spacing-tokens.Box for padding/border/bakgrunn, VStack for vertikal stacking, HStack for horisontal og HGrid for responsive grids.{ xs: 'space-4', md: 'space-8' }) for padding og gap som skal tilpasse seg skjermstørrelse.Token-navnet er px-verdien. space-8 = 8px, space-16 = 16px, osv.
"space-0" // 0px (0rem)
"space-1" // 1px (0.0625rem)
"space-2" // 2px (0.125rem)
"space-4" // 4px (0.25rem)
"space-6" // 6px (0.375rem)
"space-8" // 8px (0.5rem) ← Kompakt gap inni kort (f.eks. heading + brødtekst)
"space-12" // 12px (0.75rem)
"space-16" // 16px (1rem) ← Feltgap i skjema, knappgrupper
"space-20" // 20px (1.25rem)
"space-24" // 24px (1.5rem) ← Kortpadding (mobil)
"space-28" // 28px (1.75rem)
"space-32" // 32px (2rem) ← Kortpadding (desktop), seksjonsgap
"space-40" // 40px (2.5rem) ← Sidepadding inline (desktop)
"space-48" // 48px (3rem) ← Sidepadding block (desktop)
Ikke-eksisterende tokens:
space-3,space-5,space-10finnes ikke — TypeScript vil gi feil.
xs: "0px" // Mobil (default)
sm: "480px" // Stor mobil
md: "768px" // Nettbrett
lg: "1024px" // Desktop
2xl: "1440px" // Stor desktop
// Page container
<Box paddingBlock={{ xs: 'space-32', md: 'space-48' }} paddingInline={{ xs: 'space-16', md: 'space-40' }}>
<VStack gap={{ xs: 'space-24', md: 'space-32' }}>{/* innhold */}</VStack>
</Box>
// Card
<Box background="surface-default" padding={{ xs: 'space-24', md: 'space-32' }} borderRadius="large" borderWidth="1" borderColor="border-subtle">
<VStack gap="space-16">{/* innhold */}</VStack>
</Box>
// Form layout
<VStack gap="space-24">
<VStack gap="space-16">
<TextField label="Fornavn" />
<TextField label="Etternavn" />
</VStack>
<HStack gap="space-16" justify="end">
<Button variant="secondary">Avbryt</Button>
<Button variant="primary">Send inn</Button>
</HStack>
</VStack>
// Responsive grid
<HGrid gap="space-16" columns={{ xs: 1, sm: 2, lg: 4 }}>{/* innhold */}</HGrid>