Menú
Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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>