Informasjonskapsler på aksel.nav.no

Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Page

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

StabilOppdatert 1. juli 2025
GithubEndringslogg

Egnet til:

  • Sidelayout
  • Sentrering av sideblokker

Eksempler

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

Sandbox
Åpne eksempel i nytt vindu
TSX
<Page footer={<Footer />}>
  <Header />


  <Page.Block as="main" width="xl" gutters>
    <Content>
      <Heading level="1" size="large">
        Page.Block
      </Heading>
    </Content>
  </Page.Block>
  <Env />
</Page>

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:

    Overrides html-tag

footer?

  • Type:
    ReactNode
  • Description:

    Allows better positioning of footer

footerPosition?

  • Type:
    "belowFold"
  • Default:
    "null"
  • Description:

    Places footer below page-fold

contentBlockPadding?

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

    Adds a standardised padding of 4rem between content and footer

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

background?

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

    Background color. Accepts a background color token.

Page.Block

width?

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

    Predefined max-width

  • Example:
    text: 576px + dynamic guttersmd:   768pxlg:   1024pxxl:   1280px2xl:  1440px

gutters?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Adds a standardised responsive padding-inline

  • Example:
    3rem on > md1rem on < md

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api