Stepper

Om komponenten

Stepper brukes til å vise hvor man er i en stegvis prosess og hva som gjenstår av den. Den gir en visuell representasjon av prosessens fremgang ved å dele den opp i flere logiske trinn. Den brukes ofte i skjemaer, spørreundersøkelser eller flersiders navigasjon.

Varianter

Det finnes to varianter av stepper: vertikale stepper og horisontale stepper. Vertikale stepper passer best til smale skjermstørrelser og er å bruke når siden er bygd opp slik. Horisontale stepper er ideelle å bruke når innholdet i ett trinn avhenger av et tidligere trinn.

Farger

Stepper bruker alltid fargen brand-blue (#2A2859). Horizontal stepper bruker surface-subtle-pale-blue (#F1FDFF) på bakgrunn av et aktivt steg.

Alle bruker dark-blue-1000 (#2A2859), text-body-default som tekstfarge.

Slik bruker du komponenten

Stepper kan brukes til navigasjon, men skal ikke være eneste måte å navigere på. Trinnene vises fra venstre mot høyre, og kan trykkes på for å navigere frem og tilbake (kan velges?). Det skal være minimum 3 steps og maksimum 8 steps. Alle steps skal vises, men de man ikke har gjennomført skal ikke vises som aktive (disabled).

Gjør slik/ikke gjør slik

Unngå lange overskrifter i horisontale stepper

Anatomi

1. Tittel
2. Ikon for steg
3. Tekstfelt
4. Aktiv linje
5. Ikke aktiv linje