Gå til hovedinnhold
VISUELL IDENTITET

Spacing

Spacing brukes konsekvent på margin og padding for å oppnå konsistens på tvers av komponenter og UI.

Vårt spacing system baserer seg på standardariserte klesstørrelser fra XS til XXXL. Spacing M er default. Størrelsesskalaen baserer seg på 8 gangen som gjør det enkelt å skalere for et bredt utvalg av størrelser.

Vi skal forholde oss til denne skalaen når vi skal definere ulike avstandsituasjoner.

NavnSass variabelRempx
XXS$space-extra-small20.254
XS$space-extra-small0.58
S$space-small0.7512
M (Default)$space-medium116
L$space-large1.524
XL$space-extra-large232
2XL$space-extra-large22.540
3XL$space-extra-large3348
4XL$space-extra-large43.556
5XL$space-extra-large5464
6XL$space-extra-large64.572
7XL$space-extra-large7580
8XL$space-extra-large85.588
9XL$space-extra-large9696

Retningslinjer for bruk

Spacing brukes f.eks innenfor konteksten til en komponent (dvs. avstand mellom en label og et inputfelt).

Det kan også brukes til å lage en god avstand mellom komponenter i en layout (dvs. avstand mellom et inputfelt og en nedtrekksmeny). Denne avstandsskalaen kontrollerer mengden av whitespace mellom komponenter og layout.