Gå til innhold

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