Aksel

Meny

Typography

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Et sett med komponenter for typografi-stilene våre:

Egnet til:

  • Overskrifter
  • Avsnitt
  • Komponent-tekst

Har du innspill til komponenten?

Send forslag

Tilgjengelighet

På WCAG-nivå A og AA, dvs. de nivåene vi er pålagt til å oppfylle, er det ikke noe krav om minimum tekststørrelse eller linjehøyde. Det reglene krever er at brukeren kan justere tekststørrelse og linjehøyde. Dersom du bruker typografikomponentene, sikrer du at fontene dine er kodet på en måte som lar brukeren justere disse.

WCAG krever også god fargekontrast. Typografikomponentene alene kan ikke stå for god kontrast, siden det er du som designer eller utvikler som styrer fargevalgene. Sjekk kontrastene i løsningen din opp mot kontrastkravene med Colour Contrast Analyser, Stark i Figma eller med nettleserens DevTools.

Heading

SandboxSandbox
Åpne eksempel i nytt vindu

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 propen level som brukes for å sikre riktig heading-heirarki på siden. Bruk da level 1-6 for å velge om heading skal være h1-h6.

Spacing

Propen spacing legger på margin-bottom for øke avstanden til neste element. Avstanden varierer avhengig av size.

HeadingProps

as?

  • Type:
    React.ElementType
  • Description:

level?

  • Type:
    "1" | "2" | "3" | "4" | "5" | "6"
  • Default:
    1
  • Description:

size

  • Type:
    "xlarge" | "large" | "medium" | "small" | "xsmall"
  • Description:

children

  • Type:
    ReactNode
  • Description:

spacing?

  • Type:
    boolean
  • Description:

visuallyHidden?

  • Type:
    boolean
  • Description:

align?

  • Type:
    "start" | "center" | "end"
  • Description:

textColor?

  • Type:
    "default" | "subtle"
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLHeadingElement>
  • Description:

BodyLong

SandboxSandbox
Åpne eksempel i nytt vindu

Spacing

Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.

Bruk

BodyLong brukes til all løpende tekst, for eksempel brødtekst.

BodyLongProps

as?

  • Type:
    React.ElementType
  • Description:

size?

  • Type:
    "large" | "medium" | "small"
  • Default:
    medium
  • Description:

children

  • Type:
    ReactNode
  • Description:

truncate?

  • Type:
    boolean
  • Description:

weight?

  • Type:
    "regular" | "semibold"
  • Default:
    regular
  • Description:

align?

  • Type:
    "start" | "center" | "end"
  • Description:

visuallyHidden?

  • Type:
    boolean
  • Description:

spacing?

  • Type:
    boolean
  • Description:

textColor?

  • Type:
    "default" | "subtle"
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

BodyShort

SandboxSandbox
Åpne eksempel i nytt vindu

Spacing

Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.

Bruk

BodyShort brukes til tekster som ikke er brødtekst. Ofte brukt i komponenter, for eksempel beskrivelse i skjemafelt.

BodyShortProps

as?

  • Type:
    React.ElementType
  • Description:

size?

  • Type:
    "large" | "medium" | "small"
  • Default:
    medium
  • Description:

children

  • Type:
    ReactNode
  • Description:

truncate?

  • Type:
    boolean
  • Description:

weight?

  • Type:
    "regular" | "semibold"
  • Default:
    regular
  • Description:

align?

  • Type:
    "start" | "center" | "end"
  • Description:

visuallyHidden?

  • Type:
    boolean
  • Description:

spacing?

  • Type:
    boolean
  • Description:

textColor?

  • Type:
    "default" | "subtle"
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

Label

SandboxSandbox
Åpne eksempel i nytt vindu

Spacing

Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size. Obs: Siden komponenten rendres som en <label> ut av boksen, må du gjøre den om til et blokk-element for at spacing skal virke. Det gjøres ved hjelp av as, for eksempel as="p".

LabelProps

as?

  • Type:
    React.ElementType
  • Description:

size?

  • Type:
    "medium" | "small"
  • Default:
    medium
  • Description:

children

  • Type:
    ReactNode
  • Description:

visuallyHidden?

  • Type:
    boolean
  • Description:

spacing?

  • Type:
    boolean
  • Description:

textColor?

  • Type:
    "default" | "subtle"
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLLabelElement>
  • Description:

Detail

SandboxSandbox
Åpne eksempel i nytt vindu

Spacing

Propen spacing legger på margin-bottom for øke avstanden til neste element.

Bruk

Detail er for veldig korte tekster eller enkeltord som merkelapper og nøkkelord, men på grunn av størrelsen anbefaler vi i de fleste tilfeller å bruke BodyShort.

DetailProps

as?

  • Type:
    React.ElementType
  • Description:

children

  • Type:
    ReactNode
  • Description:

uppercase?

  • Type:
    boolean
  • Description:

truncate?

  • Type:
    boolean
  • Description:

weight?

  • Type:
    "regular" | "semibold"
  • Default:
    regular
  • Description:

align?

  • Type:
    "start" | "center" | "end"
  • Description:

visuallyHidden?

  • Type:
    boolean
  • Description:

spacing?

  • Type:
    boolean
  • Description:

textColor?

  • Type:
    "default" | "subtle"
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

size?

  • Deprecated:
    Medium is now the same as small.
  • Type:
    "medium" | "small"
  • Default:
    medium

ErrorMessage

SandboxSandbox
Åpne eksempel i nytt vindu

Spacing

Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.

Markering

Husk at rød tekst alene ikke er tilstrekkelig for å vise at det er en feilmelding. Det må også være en visuell markør som ikke avhenger av farger, for eksempel et varselikon. Dette kan du få med propen showIcon.

ErrorMessageProps

as?

  • Type:
    React.ElementType
  • Description:

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

children

  • Type:
    ReactNode
  • Description:

showIcon?

  • Type:
    boolean
  • Default:
    false
  • Description:

spacing?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

Ingress

Denne er nå markert som deprecated. Bruk i stedet BodyLong med size=large.

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 eller utforsk alle design tokens.