Menu
Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
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.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/navikt/pam-stillingsok --skill aksel-spacingThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Utforsk en kodebase for å finne muligheter for arkitektoniske forbedringer, med fokus på å gjøre kodebasen mer testbar ved å gjøre grunne moduler dypere. Bruk dette når brukeren vil forbedre arkitekturen, finne refaktoreringsmuligheter, konsolidere tett koblede moduler, eller gjøre en kodebase lettere å navigere i for AI.
Intervju brukeren grundig om en plan eller et design helt til dere har en felles forståelse, og hver gren i beslutningstreet er avklart. Bruk dette når brukeren vil stressteste en plan, bli utfordret på designet sitt, eller sier "grill meg".
Lag en detaljert plan for refaktorering med svært små commits gjennom intervju med brukeren, og gjør den om til en GitHub issue eller et klart issue-utkast. Bruk når brukeren vil planlegge en refaktorering, lage en refaktorerings-RFC, eller bryte opp en refaktorering i trygge, inkrementelle steg.
Based on SOC occupation classification
Showing SKILL.md
| name | aksel-spacing |
| description | Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid |
Responsive layout-mønstre med Navs Aksel Design System spacing-tokens.
Aldri bruk Tailwind padding/margin (p-, m-, px-, py-) med Aksel-komponenter.
Bruk alltid Aksel spacing-tokens: space-4, space-6, space-8, osv.
import { Box, VStack } from '@navikt/ds-react';
export default function Page() {
return (
<main className="max-w-7xl mx-auto">
<Box
paddingBlock={{ xs: 'space-8', md: 'space-12' }}
paddingInline={{ xs: 'space-4', md: 'space-10' }}
>
<VStack gap={{ xs: 'space-6', md: 'space-8' }}>
{/* Sideinnhold */}
</VStack>
</Box>
</main>
);
}
import { Box, VStack, Heading, BodyShort } from '@navikt/ds-react';
export function Card({ title, children }: { title: string; children: React.ReactNode }) {
return (
<Box
background="surface-default"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
borderWidth="1"
borderColor="border-subtle"
>
<VStack gap="space-4">
<Heading size="medium">{title}</Heading>
<BodyShort>{children}</BodyShort>
</VStack>
</Box>
);
}
import { VStack, HStack, TextField, Button } from '@navikt/ds-react';
export function UserForm() {
return (
<VStack gap="space-6">
{/* Input-felt med konsistent vertikal spacing */}
<VStack gap="space-4">
<TextField label="Fornavn" />
<TextField label="Etternavn" />
<TextField label="E-post" type="email" />
</VStack>
{/* Button row med horisontal spacing */}
<HStack gap="space-4" justify="end">
<Button variant="secondary">Avbryt</Button>
<Button variant="primary">Send inn</Button>
</HStack>
</>
);
}
import { HGrid, Box, VStack, Heading } from '@navikt/ds-react';
export function Dashboard() {
return (
<VStack gap={{ xs: 'space-6', md: 'space-8' }}>
<Heading size="xlarge">Dashboard</Heading>
{/* Responsiv grid: 1 kolonne mobil, 2 nettbrett, 4 desktop */}
<HGrid gap="space-4" columns={{ xs: 1, sm: 2, lg: 4 }}>
<MetricCard title="Brukere" value="1 234" />
<MetricCard title="Inntekt" value="5 678" />
<MetricCard title="Bestillinger" value="910" />
<MetricCard title= = />
{/* Innholdsområde */}
{/* Innhold */}
);
}
import { HGrid, Box, VStack } from '@navikt/ds-react';
export function TwoColumnLayout() {
return (
<HGrid gap="space-6" columns={{ xs: 1, md: 2 }}>
{/* Venstre kolonne */}
<Box
background="surface-default"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
>
<VStack gap="space-4">
{/* Venstre innhold */}
</VStack>
</Box>
{/* Høyre kolonne */}
<Box
background="surface-subtle"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
>
<VStack gap="space-4">
{/* Høyre innhold */}
);
}
import { Box, VStack, HGrid, Select, TextField, Heading } from '@navikt/ds-react';
export function FilterSection() {
return (
<Box
background="surface-subtle"
padding={{ xs: 'space-4', md: 'space-6' }}
borderRadius="large"
>
<VStack gap="space-4">
<Heading size="small">Filters</Heading>
{/* Responsive filter inputs */}
<HGrid gap="space-4" columns={{ xs: 1, md: 3 }}>
<Select label="Department">
<option>All</option>
</Select>
<Select =>
All
);
}
"space-0"; // 0px
"space-1"; // 4px
"space-2"; // 8px
"space-3"; // 12px
"space-4"; // 16px ← Form field gaps
"space-5"; // 20px
"space-6"; // 24px ← Card padding (mobile)
"space-8"; // 32px ← Card padding (desktop), section gaps
"space-10"; // 40px ← Page padding (desktop)
"space-12"; // 48px ← Page padding block (desktop)
xs: "0px"; // Mobile (default)
sm: "480px"; // Large mobile
md: "768px"; // Tablet
lg: "1024px"; // Desktop
xl: "1280px"; // Large desktop
// ✅ Page padding
paddingBlock={{ xs: 'space-8', md: 'space-12' }}
paddingInline={{ xs: 'space-4', md: 'space-10' }}
// ✅ Card padding
padding={{ xs: 'space-6', md: 'space-8' }}
// ✅ Section gaps
gap={{ xs: 'space-6', md: 'space-8' }}
// ✅ Form field gaps
gap="space-4"
// ✅ Button group gaps
gap="space-4"
// ❌ NEVER use Tailwind
className="p-4 m-2" // WRONG!
className="px-6 py-4" // WRONG!