Komponenter

Små avrundede knapper som eksisterer i ulike typer: action chip, choice chip, filter chip og tagchip.

Knapper lar brukerne gjøre handlinger og ta valg med et klikk. Knapper finnes i flere varianter og størrelser.

Flytende handlingsknapp i en sirkulær form. Finnes med kun ikon eller i en bredere variant med tekst i tillegg.

Ikonknapper har bare et ikon uten label og lar brukerne gjøre handlinger og ta valg med et enkelt klikk.

Kvadratiske knapper består av et ikon og en valgfri tilhørende label til høyre eller venstre for knappen.

Checkbox lar brukerne velge ett eller flere alternativer fra en liste over valg.

Datepicker og Native Datepicker er komponenter for å velge dato.

Dropdown presenterer en liste over alternativer som kan brukes til å filtrere eller sortere eksisterende innhold.

Filopplaster brukes for å velge en eller flere filer som skal lastes opp til et bestemt sted.

Multi select brukes for å velge opp til flere elementer til filtrering eller sortering i en liste.

Radio buttons lar brukerne velge kun ett alternativ fra en liste over valg.

Fungerer som radio button, men med en større trykkflate, og muligheter for å vise ekstra informasjon.

Segmented controls tilbyr nært beslektede valg som påvirker et objekt, en tilstand eller en visning.

Switch fungerer som en fysisk bryter for å slå på eller av en funksjon.

Text area brukes til å fylle inn lengre tekstinnhold som strekker seg over flere linjer.

Text field brukes til å skrive inn eller redigere kortfattet tekst.

Timepicker er en komponent for å velge et tidspunkt.

Breadcrumbs brukes for å vise hvor man er i navigasjonshierarkiet.

Overflow menu består av en ikonknapp som viser en liste over handlinger når man klikker på den.

Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i samme visning.

Side navigation brukes som en global meny for å vise et navigasjons-hierarki med ett eller to nivåer.

En stepper viser fremdriften gjennom en stegvis prosess.

Top navigation brukes som en global navigasjonsmeny som ligger horisontalt på toppen i grensesnittet.

Cards er bokser som viser innhold og handlinger om et emne som man ønsker å fremheve på en side.

Contrast er en invertert versjon av profilen vår og kan brukes til å skape et visuelt hierarki på siden.

Drawer er et panel som glir inn fra siden. Benyttes til å gi tilleggsinformasjon, uten å avbryte flyten.

Expandables er komponenter for å kollapse og ekspandere innhold.

Media card gir et kort sammendrag av innhold og støtter video, bilde eller grafikk.

Modal er et vindu som legger seg over og toner ned øvrig innhold på siden, og tilbyr fokus på spørsmål eller info.

Tables brukes for å vise frem strukturert datasett på tvers av rader og kolonner.

Tabs brukes til å organisere og gruppere informasjon, og kan benyttes som lokal navigasjon på en side.

Alert brukes til å gi varsel om en handling eller for å fremheve viktig info som brukeren bør ta stilling til.

Badge er en visuell indikator som brukes til å varsle status til et element eller for å kategorisere et innhold.

Loader er en visuell tilbakemelding som indikerer at lasting av innhold og data er i prosess.

Popover er en boks med tilleggsinformasjon eller valg, som legger seg over annet innhold.

Skeleton er en placeholder som indikerer at deler av innholdet er i ferd med å laste inn.

Tooltip brukes for å beskrive eller gi tilleggsinformasjon ved hover eller fokus på elementet.

Travel Switch er en variant av switch som brukes til filtrering av transportmidler.

Travel header presenterer destinasjonene som man reiser fra og til.

Travel leg benyttes til å visualisere reisestrekningen mellom to destinasjoner.

Travel tag brukes til å opplyse om transportmiddel og linjenummer til en avgang.