Typography@navikt/ds-react

Installasjon

Mobil-skalering

Ved brekkpunkt 480px vil Heading size xlarge og large skaleres ned et hakk.

• xlarge: 40px -> 32px
• large: 32px -> 28px

medium størrselse er på 24px, så man mister ikke heirarkiet når størresene skalerer ned på mobil.

Migrering fra nav-frontend-typografi

Typografikomponentene i @navikt/ds-react er ikke helt 100% en-til-en med de i nav-frontend-typografi, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.

Overskrifter

Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din nettside, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men <Sidetittel> opplevdes som for stor.

En direkte oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:

<Sidetittel> -> <Heading size="xlarge">
<Innholdstittel> -> <Heading size="large">
<Systemtittel> -> <Heading size="medium">
<Undertittel> -> <Heading size="small">

Brødtekst

De nye komponentene for brødtekst heter <BodyLong> og <BodyShort>. <BodyLong> er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal <BodyShort> brukes, for den har en lavere linjehøyde.

Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en <BodyLong size="small"> og <BodyShort size="small"> som er til for deg.

Altså: <Normaltekst> -> <BodyLong>/<BodyShort> (muligens med size=small)

Andre typografikomponenter

<Ingress> -> <Ingress>
<Element> -> <Label>
<UndertekstBold> -> <Detail>
<Undertekst> -> <Detail size="small">

Vi valgt å ikke videreføre <Feilmelding>, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.

Props

"1" | "2" | "3" | "4" | "5" | "6"

"xlarge" | "large" | "medium" | "small" | "xsmall"

ReactNode

boolean

string

Ref<HTMLHeadingElement>

ReactNode

boolean

string

Ref<HTMLParagraphElement>

"medium" | "small"

ReactNode

boolean

string

Ref<HTMLParagraphElement>

"medium" | "small"

ReactNode

boolean

string

Ref<HTMLParagraphElement>

"medium" | "small"

ReactNode

boolean

boolean

string

Ref<HTMLParagraphElement>

"medium" | "small"

ReactNode

boolean

string

Ref<HTMLParagraphElement>