Hopp til innhold

Typography

Vi tilbyr Sass-mixins og utility-klasser for alle de typografiske stilene i Jøkul.

Bruk

For å bruke typografistilene kan du velge mellom å bruke utility-klassene direkte, eller å lage din egen klasse hvor du bruker Sass-mixins for å hente inn riktig stil. Vi anbefaler at du bruker mixins til å lage egne klasser når du lager komponenter til løsningen din, og at du bare bruker utility-klassene til løpende tekst og overskrifter.

For å bruke mixin-ene må du ha satt opp støtte for Sass i prosjektet ditt, og importere Jøkul der du skal bruke dem, f.eks. slik: @use "~@fremtind/jkl-core/jkl";. Nøyaktig syntaks kan variere ut fra byggoppsettet ditt.

Les mer om regler for typografi under Profilen vår.

Fontskala

Dette er tekststilene som tilbys i Jøkul, og hvordan du bruker dem ved hjelp av mixins eller nytteklasser. Stilene tilpasses automatisk på små skjermer.

StilnavnMixinUtility-klasse

Title

@include jkl.text-style("title")

.jkl-title

Heading 1

@include jkl.text-style("heading-1")

.jkl-heading-1

Heading 2

@include jkl.text-style("heading-2")

.jkl-heading-2

Heading 3

@include jkl.text-style("heading-3")

.jkl-heading-3

Heading 4

@include jkl.text-style("heading-4")

.jkl-heading-4

Heading 5

@include jkl.text-style("heading-5")

.jkl-heading-5

Body

@include jkl.text-style("body")

.jkl-body

Small

@include jkl.text-style("small")

.jkl-small

Manuell styring av variant

I de aller fleste tilfeller skal tekststilene brukes som de er, slik at tekststørrelsen tilpasses brukerens skjerm. I noen tilfeller kan det likevel være riktig å spesifisere varianten av en stil, som for eksempel når man lager en versjon av en komponent for informasjonstette løsninger.

For å velge variant må du bruke Sass-mixins, og spesifisere om du vil ha varianten for small-screen eller large-screen: @include jkl.text-style("body/small-screen");

Fontskala for små skjermer

StilnavnMixin

Title

@include jkl.text-style("title/small-screen")

Heading 1

@include jkl.text-style("heading-1/small-screen")

Heading 2

@include jkl.text-style("heading-2/small-screen")

Heading 3

@include jkl.text-style("heading-3/small-screen")

Heading 4

@include jkl.text-style("heading-4/small-screen")

Heading 5

@include jkl.text-style("heading-5/small-screen")

Body

@include jkl.text-style("body/small-screen")

Small

@include jkl.text-style("small/small-screen")

Fontskala for store skjermer

StilnavnMixin

Title

@include jkl.text-style("title/large-screen")

Heading 1

@include jkl.text-style("heading-1/large-screen")

Heading 2

@include jkl.text-style("heading-2/large-screen")

Heading 3

@include jkl.text-style("heading-3/large-screen")

Heading 4

@include jkl.text-style("heading-4/large-screen")

Heading 5

@include jkl.text-style("heading-5/large-screen")

Body

@include jkl.text-style("body/large-screen")

Small

@include jkl.text-style("small/large-screen")

React API

Her finner du en oversikt over props på komponentene i pakken.