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
Heading
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?
- 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
ref?
- Type:
LegacyRef<HTMLHeadingElement>
- Description:
BodyLong
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?
- 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
ref?
- Type:
LegacyRef<HTMLParagraphElement>
- Description:
BodyShort
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?
- 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
ref?
- Type:
LegacyRef<HTMLParagraphElement>
- Description:
Label
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?
- 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
ref?
- Type:
LegacyRef<HTMLLabelElement>
- Description:
Detail
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?
- Type:
React.ElementType
- Description:
size?
- Type:
"medium" | "small"
- Default:medium
- 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
ref?
- Type:
LegacyRef<HTMLParagraphElement>
- Description:
ErrorMessage
Varianter
Størrelse
Komponenten tilbyr disse størrelsene "medium" | "small"
tilsvarende 18px og 16px.
ErrorMessageProps
as?
- Type:
React.ElementType
- Description:
size?
- Type:
"medium" | "small"
- Default:"medium"
- Description:
children
- Type:
ReactNode
- Description:
spacing?
- Type:
boolean
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLParagraphElement>
- Description:
Ingress
Denne er nå markert som deprecated. Bruk BodyLong.
Tokens
Token | Fallback |
---|---|
--ac-typo-error-text | --a-text-danger |