Intro
Dette er et sett med komponenter som wrapper typografi-stilene våre.
Egnet til å:
- Tekst med innebygd spacing
Har du innspill til komponenten?
Send forslagHeading
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
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
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
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
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
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
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
Token | Fallback |
--ac-typo-error-text | --a-text-danger |