Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Layout primitives

StabilOppdatert 9. mai 2025

Primitives gjør det enklere å bygge layout som følger de samme konseptene og brekkpunktene, uten å måtte skrive noe egen CSS. Dette gjør det lettere å bygge responsive løsninger som fungerer likt på tvers av ulike apper.

Komponenter

Page

Page lar deg bygge opp top-level layout for appen din. Dette inkluderer plassering av footer, maksbredde og sentrering av innhold. Enkle layouts, men også de fleste ekspertsystemer, vil kunne bruke komponenten som startpunkt.

HGrid

HGrid brukes til å organisere innhold i kolonner. Den har et scopet API for CSS grid layout med støtte for responsivitet basert på brekkpunktene våre. Vi støtter bare horisontal layout med grid-template-columns.

Stack

Brukes for å organisere innhold i én dimensjon. Den har et scopet API for CSS flexbox med støtte for responsivitet basert på brekkpunktene våre.

  • HStack: Horisontal layout med flex-direction: row
  • VStack: Vertikal layout med flex-direction: column

Box

Box brukes primært som byggestein for andre komponenter, med støtte for background, border, borderRadius og shadow.

Show/Hide

Show og Hide lar deg vise eller skjule elementer på ulike skjermbredder. De tilbyr et API der innhold blir satt til display: none basert på brekkpunktene våre.

Bleed

Bleed lar deg legge til negativ horisontal og vertikal margin på innhold.

ResponsiveProp

En av grunnpilarene til våre layout primitives er typen ResponsiveProp. Typen gjør det mulig å sette prop-verdien basert på brekkpunkt. Dette lar deg eksempelvis endre gap basert på skjermbredde:

TSX
type ResponsiveProp<T> = T | {
  [Breakpoint in "xs" | "sm" | "md" | "lg" | "xl" | "2xl"]?: T;
};
TSX
// Statisk gap
<HStack gap="4">
   ...
</HStack>


// Dynamisk gap
<HStack gap={{xs: "2", md: "4"}}>
   ...
</HStack>

AsChild

Alle primitives unntatt Page støtter også asChild-API-et. Det kan brukes til å slå sammen DOM-noder. Klasser, stiler og event-handlers slås da sammen. Dette kan være nyttig for å forenkle DOM-en, men gjør det også mulig å løse noe layout enklere. For at dette skal fungere må child kunne ta inn className og style som props.

TSX
// React
<Box asChild background="...">
  <HStack gap="4">
    <div />
    <div />
  </HStack>
</Box>


// HTML output
<div class="box hstack">
  <div />
  <div />
</div>

BasePrimitive

Komponentene HGrid, Box, HStack, VStack og Stack arver fra en base-type som har de mest brukte størrelses- og posisjons-attributtene i CSS. I props som har med avstander å gjøre, må du bruke verdier basert på tokens fra Aksel. F.eks. padding="4" gir --a-spacing-4 som tilsvarer 1rem.

BasePrimitiveType

padding?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    padding='space-16'padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

paddingInline?

  • Type:
    ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
  • Description:

    Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    paddingInline='space-16'paddingInline='space-16 space-20'paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

paddingBlock?

  • Type:
    ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
  • Description:

    Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    paddingBlock='space-16'paddingBlock='space-16 space-20'paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

margin?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    margin='space-16'margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

marginInline?

  • Type:
    ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto">
  • Description:

    Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    marginInline='space-16'marginInline='space-16 space-20'marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

marginBlock?

  • Type:
    ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto">
  • Description:

    Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    marginBlock='space-16'marginBlock='space-16 space-20'marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

width?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS width

minWidth?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS min-width

maxWidth?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS max-width

height?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS height

minHeight?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS min-height

maxHeight?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS max-height

position?

  • Type:
    ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
  • Description:

    CSS position

inset?

  • Type:
    ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
  • Description:

    CSS inset. Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    inset='space-16'inset='space-16 space-20'inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

top?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    CSS top Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    top='space-16'top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

right?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    CSS right Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    right='space-16'right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

bottom?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    CSS bottom Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    bottom='space-16'bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

left?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:

    CSS left Accepts a spacing token or an object of spacing tokens for different breakpoints.

  • Example:
    left='space-16'left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

overflow?

  • Type:
    ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
  • Description:

    CSS overflow

overflowX?

  • Type:
    ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
  • Description:

    CSS overflow-x

overflowY?

  • Type:
    ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
  • Description:

    CSS overflow-y

flexBasis?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS flex-basis

flexShrink?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS flex-shrink

flexGrow?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS flex-grow

gridColumn?

  • Type:
    ResponsiveProp<string>
  • Description:

    CSS grid-column