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
Propen 'spacing' legger til mellomrom under overskriften. Avstanden varierer avhengig av 'size'.
Propen 'level' bestemmer hvilken h-tagg som brukes. Du kan sette 'size' uavhengig av dette, men størrelsen bør samsvare med nivået.
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
'truncate' gjør at teksten kuttes ved enden av første linje. Pass på så du ikke gjemmer viktig informasjon som man ikke kan finne andre steder.
Propen 'spacing' legger til mellomrom under avsnittet. Avstanden varierer avhengig av 'size'.
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
'truncate' gjør at teksten kuttes ved enden av første linje. Pass på så du ikke gjemmer viktig informasjon som man ikke kan finne andre steder.
Propen 'spacing' legger til mellomrom under avsnittet. Avstanden varierer avhengig av 'size'.
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 |