Jøkul
Fundamenter

Størrelser

Size-modusen gir deg mulighet til å velge størrelse på komponentene våre ved behov.

Tidligere kalte vi størrelsesdimensjonen density, i tillegg til at fontstørrelsene endret seg avhengig av skjermstørrelser.

Nå bruker vi ordet size for å gjøre det tydeligere at det som endrer seg er komponentenes størrelse, og ikke den faktiske tettheten i grensesnittet.

Modusene

Vi har tre ulike moduser: small, medium og large. Modus kan settes på hele eller deler av siden, også helt ned på komponentnivå. Ikke sett modus basert på skjermstørrelse.

Small

Small brukes for å gi plass til flere funksjoner i grensesnittet samtidig. Dette gjøres typisk i informasjonstette løsninger som saksbehandlingsverktøy.

Informasjonstette løsninger kan gi høy kognitiv last og små klikkflater. Vurder om du kan strukturere innholdet på en annen måte før du tar i bruk denne varianten på hele siden. Ikke sett small på en komponent bare fordi du synes det ser bedre ut.

Vi har mange komponenter som gjør det mulig å gruppere, skjule, og kontekstualisere handlinger uten å gjøre komponentene mindre. Menu og Modal er eksempler på dette.

Medium

Medium er standardstørrelsen på komponentene våre. Denne modusen skal brukes i de fleste tilfeller, også på saksbehandlingstjenester, rådgiververktøy og ekspertgrensesnitt.

Large

Large egnes til å fremheve innhold, og lage fokuserte flyter nærme distributørens flater. Et typisk eksempel vil være en kjøpsflyt der vi stiller et spørsmål av gangen.

Hvor setter jeg størrelsesmodus?

Size skal ikke settes på én komponent, men på landemerker. Typiske landemerker hvor det er relevant å sette størrelsesmodus er sidemenyer, headere og skjemaer.

Size skal ikke brukes for å differansiere mellom små og store skjermer. Har du altså satt noe til Large på mobil skal det være Large på desktop.

Hvorfor?

Dersom du setter size på altfor små områder vil det bli vanskelig å finne tilbake til hva som bestemmer størrelsen på komponentene.

En medium og en large komponent skal som regel ikke settes sammen fordi det kan se rart ut i ulike tilfeller.

Vi har endret standard fontstørrelse i forbindelse med lansering av size, som gjør det mulig å bruke èn modus for alle flater.

Hvordan setter jeg modus?

    Figma

    Variable mode kan settes overordnet på en frame med innhold fra Jøkul, eller direkte på en komponent.

    For å gjøre dette markerer du elementet ditt og går til Appearance-seksjonen i høyre sidepanel. Trykk på vifteikonet Apply variable mode og velg modus.

    Moduser som er påskrudd vises i Apperance-seksjonen, og kan fjernes ved å klikke på minustegnet.

    Kode

    I kode bruker du en såkalt data-attributt: <Card data-size="large">Kjøp forsikring</Card>