Aksel

Meny

Komponenter / Core

Typography

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Dette er et sett med komponenter som wrapper typografi-stilene våre: Heading, Ingress, BodyLong, BodyShort, Label og Detail.

Egnet til:

  • Tekst med innebygd spacing

Har du innspill til komponenten?

Send forslag

Heading

Åpne eksempel 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 spacing below text
visuallyHidden? boolean
Visually hide text. Text will still be accessible for screenreaders
align? "start" | "center" | "end"
Adjust text-align.
textColor? "default" | "subtle"
Adjusts color
className? string
ref? Ref<HTMLHeadingElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
HeadingProps extends HTMLHeadingElement

BodyLong

Åpne eksempel i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "large" | "medium" | "small" tilsvarende 20px, 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?"large" | "medium" | "small"
large: 20px, medium: 18px, small: 16px
children ReactNode
Text
truncate? boolean
Truncate text overflow with ellipsis.
weight?"regular" | "semibold"
Adjusts font-weight.
align? "start" | "center" | "end"
Adjust text-align.
visuallyHidden? boolean
Visually hide text. Text will still be accessible for screenreaders
spacing? boolean
Adds spacing below text
textColor? "default" | "subtle"
Adjusts color
className? string
ref? Ref<HTMLParagraphElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
BodyLongProps extends HTMLParagraphElement

BodyShort

Åpne eksempel i nytt vindu

Varianter

Størrelse

Komponenten tilbyr disse størrelsene "large" | "medium" | "small" tilsvarende 20px, 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?"large" | "medium" | "small"
large: 20px, medium: 18px, small: 16px
children ReactNode
Paragraph text
truncate? boolean
Truncate text overflow with ellipsis.
weight?"regular" | "semibold"
Adjusts font-weight.
align? "start" | "center" | "end"
Adjust text-align.
visuallyHidden? boolean
Visually hide text. Text will still be accessible for screenreaders
spacing? boolean
Adds spacing below text
textColor? "default" | "subtle"
Adjusts color
className? string
ref? Ref<HTMLParagraphElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
BodyShortProps extends HTMLParagraphElement

Label

Åpne eksempel 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
visuallyHidden? boolean
Visually hide text. Text will still be accessible for screenreaders
spacing? boolean
Adds spacing below text
textColor? "default" | "subtle"
Adjusts color
className? string
ref? Ref<HTMLLabelElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
LabelProps extends HTMLLabelElement

Detail

Åpne eksempel 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.

DetailProps

as? React.ElementType
OverridableComponent-api
size?"medium" | "small"
@deprecated Medium === small
children ReactNode
Paragraph text
uppercase? boolean
All caps
truncate? boolean
Truncate text overflow with ellipsis.
weight?"regular" | "semibold"
Adjusts font-weight.
align? "start" | "center" | "end"
Adjust text-align.
visuallyHidden? boolean
Visually hide text. Text will still be accessible for screenreaders
spacing? boolean
Adds spacing below text
textColor? "default" | "subtle"
Adjusts color
className? string
ref? Ref<HTMLParagraphElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
DetailProps extends HTMLParagraphElement

ErrorMessage

Åpne eksempel 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 spacing below text
className? string
ref? Ref<HTMLParagraphElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
ErrorMessageProps extends HTMLParagraphElement

Ingress

Denne er nå markert som deprecated. Bruk BodyLong.

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.