Intro
Et sett med komponenter for typografi-stilene våre:
Tilgjengelighet
På WCAG-nivå A og AA, dvs. de nivåene vi er pålagt til å oppfylle, er det ikke noe krav om minimum tekststørrelse eller linjehøyde. Det reglene krever er at brukeren kan justere tekststørrelse og linjehøyde. Dersom du bruker typografikomponentene, sikrer du at fontene dine er kodet på en måte som lar brukeren justere disse.
WCAG krever også god fargekontrast. Typografikomponentene alene kan ikke stå for god kontrast, siden det er du som designer eller utvikler som styrer fargevalgene. Sjekk kontrastene i løsningen din opp mot kontrastkravene med Colour Contrast Analyser, Stark i Figma eller med nettleserens DevTools.
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.
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 propen level som brukes for å sikre riktig heading-heirarki på siden. Bruk da level 1-6 for å velge om heading skal være h1-h6.
Spacing
Propen spacing legger på margin-bottom for øke avstanden til neste element. Avstanden varierer avhengig av size.
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'.
Spacing
Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.
Bruk
BodyLong brukes til all løpende tekst, for eksempel brødtekst.
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'.
Spacing
Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.
Bruk
BodyShort brukes til tekster som ikke er brødtekst. Ofte brukt i komponenter, for eksempel beskrivelse i skjemafelt.
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
Propen 'spacing' legger til margin-bottom. Avstanden varierer avhengig av 'size'.
Spacing
Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size. Obs: Siden komponenten rendres som en <label> ut av boksen, må du gjøre den om til et blokk-element for at spacing skal virke. Det gjøres ved hjelp av as, for eksempel as="p".
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
Propen 'spacing' legger til mellomrom under teksten. Avstanden varierer avhengig av 'size'.
Spacing
Propen spacing legger på margin-bottom for øke avstanden til neste element.
Bruk
Detail er for veldig korte tekster eller enkeltord som merkelapper og nøkkelord, men på grunn av størrelsen anbefaler vi i de fleste tilfeller å bruke BodyShort.
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
Spacing
Propen spacing legger på margin-bottom for å gi mer avstand til neste element. Avstanden varierer avhengig av size.
Markering
Husk at rød tekst alene ikke er tilstrekkelig for å vise at det er en feilmelding. Det må også være en visuell markør som ikke avhenger av farger, for eksempel et varselikon.
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 i stedet BodyLong med size=large.
Tokens
| Token | Fallback |
|---|---|
| --ac-typo-error-text | --a-text-danger |