Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • ConfirmationPanel
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • LinkPanelAvviklet
      • PanelAvviklet

VStack

Oppdatert 30. april 2025Stabil
GithubYarnEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Props
    • VStack

Intro

VStack er en av våre layout primitives. Den brukes til å vertikalt gruppere elementer sammen med lik avstand. Dette er en wrapper for display:flex og flex-direction:column.

Egnet til:

  • Gruppering av skjema-elementer

Uegnet til:

  • Oppbygging av større side-layout (se Page og HGrid)

Har du innspill til komponenten?

Send forslag

Eksempler

VStack er en enkel layout-komponent for flexbox med flex-direction: column.

SandboxSandbox
Åpne eksempel i nytt vindu

Endrer 'align-items'.

Endrer 'justify-content'.

På noen props, feks. gap, kan du sette ulike verdier per brekkpunkt. Implementasjonen er mobile-first, slik at 'sm: 8' vil også gjelde for 'md', 'lg' og 'xl'.

Props

VStack

as?

  • Type:
    React.ElementType
  • Description:

asChild?

  • Type:
    boolean
  • Description:
  • Example:

justify?

  • Type:
    ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">
  • Description:
  • Example:

align?

  • Type:
    ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">
  • Default:
    "stretch"
  • Description:
  • Example:

gap?

  • 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:
  • Example:

padding?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

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:
  • Example:

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:
  • Example:

margin?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

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:
  • Example:

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:
  • Example:

width?

  • Type:
    ResponsiveProp<string>
  • Description:

minWidth?

  • Type:
    ResponsiveProp<string>
  • Description:

maxWidth?

  • Type:
    ResponsiveProp<string>
  • Description:

height?

  • Type:
    ResponsiveProp<string>
  • Description:

minHeight?

  • Type:
    ResponsiveProp<string>
  • Description:

maxHeight?

  • Type:
    ResponsiveProp<string>
  • Description:

position?

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

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:
  • Example:

top?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

right?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

bottom?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

left?

  • Type:
    ResponsiveProp<SpacingScale>
  • Description:
  • Example:

overflow?

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

overflowX?

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

overflowY?

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

flexBasis?

  • Type:
    ResponsiveProp<string>
  • Description:

flexShrink?

  • Type:
    ResponsiveProp<string>
  • Description:

flexGrow?

  • Type:
    ResponsiveProp<string>
  • Description:

gridColumn?

  • Type:
    ResponsiveProp<string>
  • Description:

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack