Gå til innhold

Layout

For å sikre likt utseende på tvers av løsninger og grensesnitt har vi definert et sett med størrelser og avstander som design tokens.

Rutenett

Det er satt opp et enkelt gridsystem basert på 12 kolonner. Marginene på sidene er --sds-space-padding-huge, og med--sds-space-gap-large som mellomrom mellom kolonnene.

Bilde på gridsystem i Figma

Maksbredde

På store skjermer og med enklere innhold kan det være fornuftig å begrense hvor mye bredde innholdet skal ta, da det kan se rart ut f.eks. på en ultra-wide skjerm.

I Figma er det definert et layout-grid som har en bredde på 960px. Innholdet må også tilpasses, og section-mønstrene er tilrettelagt slik at man kan bruke max-width-funksjonaliteten i Figma.

Bruddpunkter

Vi har definert forskjellige enhetsstørrelser i designsystemet, mobil, nettbrett, stasjonær datamaskin, og svært brede skjermer (mobile, tablet, desktop, utrawide). Bruddpunktene er verdiene som definerer når grensesnittet bytter mellom de forskjellige størrelsene og enhetene.

Skisse på mobildings--sds-base-breakpoint-mobile
Skisse på nettbrettdings--sds-base-breakpoint-tablet
Skisse på dataskjerm--sds-base-breakpoint-desktop
Skisse på ekstrebred dataskjerm--sds-base-breakpoint-ultrawide