Aksel
Komponenter / Core

Typography

StabilOPPDATERT 16. desember 2022
GithubYarn FigmaEndringslogg

Dette er et sett med komponenter som wrapper typografi-stilene våre.

Egnet til å:

  • Tekst med innebygd spacing

Har du innspill til komponenten?

Send forslag
Kom i gang som designeraksel.nav.noInstalleraksel.nav.no

Heading

Åpne i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "xlarge" | "large" | "medium" | "small" | "xsmall" tilsvarende 40, 32, 24, 20, og 18px.

Mobilskalering

Ved brekkpunkt 480px vil Heading size xlarge og large skaleres ned et hakk. xlarge går fra 40px til 32px, mens large går fra 32px til 28px.

Hierarki

Komponenten tilbyr en prop: level som brukes for å sikre riktig heading-heirarki på siden. Bruk da level 1-6 for å velge om heading skal være h1-h6.

Med eller uten spacing (padding)

Heading har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

HeadingProps

as? React.ElementType
OverridableComponent-api
level?"1" | "2" | "3" | "4" | "5" | "6"
Heading level
size "xlarge" | "large" | "medium" | "small" | "xsmall"
Changes text-sizing
children ReactNode
Heading text
spacing?boolean
Adds margin-bottom
className? string
ref? Ref<HTMLHeadingElement>
HeadingProps extends HTMLHeadingElement

Ingress

Åpne i nytt vindu

Varianter

Med eller uten spacing (padding)

Ingress har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

IngressProps

as? React.ElementType
OverridableComponent-api
children ReactNode
Ingress text
spacing? boolean
Adds margin-bottom
className? string
ref? Ref<HTMLParagraphElement>
IngressProps extends HTMLParagraphElement

BodyLong

Åpne i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "medium" | "small" tilsvarende 18px og 16px.

Med eller uten spacing (padding)

BodyLong har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

BodyLongProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
medium: 18px, small: 16px
children ReactNode
Paragraph text
spacing? boolean
Adds margin-bottom
className? string
ref? Ref<HTMLParagraphElement>
BodyLongProps extends HTMLParagraphElement

BodyShort

Åpne i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "medium" | "small" tilsvarende 18px og 16px.

Med eller uten spacing (padding)

BodyShort har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

BodyShortProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
medium: 18px, small: 16px
children ReactNode
Paragraph text
spacing? boolean
Adds margin-bottom
className? string
ref? Ref<HTMLParagraphElement>
BodyShortProps extends HTMLParagraphElement

Label

Label rendres i dag som et 'label'-element. Husk å endre til riktig tag ved bruk av 'as'-prop hvis du vil bruke eks span/p

Åpne i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "medium" | "small" tilsvarende 18px og 16px.

Med eller uten spacing (padding)

Label har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

LabelProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
medium: 18px, small: 16px
children ReactNode
Paragraph text
spacing? boolean
Adds margin-bottom
className? string
ref? Ref<HTMLLabelElement>
LabelProps extends HTMLLabelElement

Detail

Åpne i nytt vindu

Varianter

Med eller uten spacing (padding)

Detail har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.

Uppercase

uppercase

DetailProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
@deprecated Medium === small
children ReactNode
Paragraph text
spacing? boolean
Adds margin-bottom
uppercase? boolean
All caps
className? string
ref? Ref<HTMLParagraphElement>
DetailProps extends HTMLParagraphElement

ErrorMessage

Åpne i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "medium" | "small" tilsvarende 18px og 16px.

ErrorMessageProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
medium: 18px, small: 16px
children ReactNode
Error text
spacing? boolean
Adds margin-bottom
className? string
ref? Ref<HTMLParagraphElement>
ErrorMessageProps extends HTMLParagraphElement

Tokens

TokenFallback
--ac-typo-error-text--a-text-danger
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.

Var denne artikkelen til hjelp?