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
      • 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
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Page

Oppdatert 9. mai 2025Stabil
GithubYarnEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Width
  • Retningslinjer
    • Sidelayout
  • Tilgjengelighet
  • Props
    • Page
    • Page.Block

Intro

Page er en av våre layout primitives. Den hjelper deg å bygge opp sidelayout. Dette inkluderer plassering av footer, maksbredde og sentrering av sideblokker.

Egnet til:

  • Sidelayout
  • Sentrering av sideblokker

Har du innspill til komponenten?

Send forslag

Eksempler

Page.Block kan også brukes i header og footer for å sikre at innholdet er sentrert og har samme maksbredde som resten av innholdet.

SandboxSandbox
Åpne eksempel i nytt vindu

footerPosition=belowFold sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.

Propen gutters på Page.Block setter responsive gutters (padding-inline).

Propen contentBlockPadding på Page sikrer at det alltid vil være en minimumspadding mellom innhold og footer. Dette vil være en god fallback, men mange layouts vil trenge ekstra padding top/bottom.

Propen background lar deg velge mellom default og subtle bakgrunn.

Propen width på Page.Block sentrerer innhold og legger på maksbredde.

Width

Page.Block kommer med predefinerte maksbredder:

VerdiMaksbreddeBeskrivelse
2xl1440pxFor opptil 3 kolonner. Dette er standard maksbredde og bør brukes på header og footer.
xl1280pxFor opptil 3 kolonner.
lg1024pxFor opptil 2 kolonner.
md768pxFor 1 kolonne.
text576px + guttersAnbefalt linjelengde for løpende tekst.

Retningslinjer

Sidelayout

De fleste applikasjoner bør ha en definert maksbredde og være sentrert. Da unngår du at elementer som f.eks. sidebar og header flyter ut ved bruk av brede skjermer. I Nav er 1440px standard maksbredde. Ved å bruke width="2xl" i Page.Block-komponenten blir dette håndtert for deg.

Unntak

Interne applikasjoner eller grensesnitt vil kunne ha behov for større tilgjengelig skjermflate. Da gir det oftest mening å ikke definere en maksbredde, men heller gi kontrollen til brukeren som selv justerer størrelsen på nettleservinduet.

Tilgjengelighet

Page.Block er som standard en div. Semantikken må du styre ved å sette as til f.eks "header", "main" eller "footer".

Props

Page

as?

  • Type:
    "div" | "body"
  • Default:
    "div"
  • Description:

footer?

  • Type:
    ReactNode
  • Description:

footerPosition?

  • Type:
    "belowFold"
  • Description:

contentBlockPadding?

  • Type:
    "end" | "none"
  • Default:
    end
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

background?

  • Deprecated:
    Use `<Box asChild background="...">` wrapped around `<Page>`.
  • Type:
    LegacyBgColorKeys
  • Default:
    "bg-default"
  • Description:

Page.Block

as?

  • Type:
    React.ElementType
  • Description:

width?

  • Type:
    "text" | "md" | "lg" | "xl" | "2xl"
  • Default:
    max-width: 100%;
  • Description:
  • Example:

gutters?

  • Type:
    boolean
  • Default:
    false
  • Description:
  • Example:

className?

  • Type:
    string

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