Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Typography

Oppdatert 3. september 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    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.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack