Aksel Spacing

Aksel Spacing Skill

This skill provides responsive layout patterns using Nav Aksel Design System spacing tokens.

Critical Rule

NEVER use Tailwind padding/margin utilities (p-, m-, px-, py-) with Aksel components.

Always use Aksel spacing tokens: space-4, space-6, space-8, etc.

Page Container Pattern

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' }}>
          {/* Page content */}
        </VStack>
      </Box>
    </main>
  );
}

Card Pattern

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>
  );
}

Form Layout Pattern

import { VStack, HStack, TextField, Button } from '@navikt/ds-react';

export function UserForm() {
  return (
    <VStack gap="space-6">
      {/* Input fields with consistent vertical spacing */}
      <VStack gap="space-4">
        <TextField label="First Name" />
        <TextField label="Last Name" />
        <TextField label="Email" type="email" />
      </VStack>

      {/* Button group with horizontal spacing */}
      <HStack gap="space-4" justify="end">
        <Button variant="secondary">Cancel</Button>
        <Button variant="primary">Submit</Button>
      </HStack>
    </VStack>
  );
}

Dashboard Grid Pattern

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>

      {/* Responsive grid: 1 col mobile, 2 tablet, 4 desktop */}
      <HGrid gap="space-4" columns={{ xs: 1, sm: 2, lg: 4 }}>
        <MetricCard title="Users" value="1 234" />
        <MetricCard title="Revenue" value="5 678" />
        <MetricCard title="Orders" value="910" />
        <MetricCard title="Growth" value="+12%" />
      </HGrid>

      {/* Content area */}
      <Box
        background="surface-subtle"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        {/* Content */}
      </Box>
    </VStack>
  );
}

Two-Column Layout Pattern

import { HGrid, Box, VStack } from '@navikt/ds-react';

export function TwoColumnLayout() {
  return (
    <HGrid gap="space-6" columns={{ xs: 1, md: 2 }}>
      {/* Left column */}
      <Box
        background="surface-default"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        <VStack gap="space-4">
          {/* Left content */}
        </VStack>
      </Box>

      {/* Right column */}
      <Box
        background="surface-subtle"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        <VStack gap="space-4">
          {/* Right content */}
        </VStack>
      </Box>
    </HGrid>
  );
}

Filter Section Pattern

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 label="Status">
            <option>All</option>
          </Select>

          <TextField label="Search" />
        </HGrid>
      </VStack>
    </Box>
  );
}

Spacing Tokens Reference

"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)

Responsive Breakpoints

xs: "0px"; // Mobile (default)
sm: "480px"; // Large mobile
md: "768px"; // Tablet
lg: "1024px"; // Desktop
xl: "1280px"; // Large desktop

Common Patterns

// ✅ 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!