Hopp til innhold
Aksel

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

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

    text: 576px + dynamic gutters

    md: 768px

    lg: 1024px

    xl: 1280px

    2xl: 1440px

gutters?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Adds a standardised responsive padding-inline

    3rem on > md

    1rem 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