Denne komponenten finnes kun i kode. I Figma bruker du text styles.
Retningslinjer
Velg riktig størrelse
Text har fire størrelser: xs (14 px) for hjelpetekst og bittesmå detaljer, s (16 px) for kompakt tekst i tabeller og lister, m (18 px) for vanlig brødtekst, og l (24 px) for ingress eller fremhevet tekst. Default er m, og det er nesten alltid riktig for løpende avsnitt.
Velg riktig element
Bruk as for å rendre Text som riktig HTML-element. p er default. Bruk strong, em, kbd, code, samp og var for inline-utheving. Bruk label og legend i skjema. code, kbd, samp og var får automatisk Fremtind Grotesk Mono.
Inline-elementer
Se Inline-elementer i StorybookEkstern lenke
Utheving og linjehøyde
bold gjør teksten fet. short setter tettere linjehøyde — bruk det i tett-pakkede sammenhenger som tabellceller eller kort, der teksten i all hovedsak går over én linje.
Bold og short
Se Bold og short i StorybookEkstern lenke
Sammen med liste-komponentene
Når du trenger en liste, bruk List, OrderedList og ListItem fremfor å sette as=ul på Text. Du kan fortsatt bruke Text for typografien inne i hvert listepunkt.
Tilgjengelighet
Skjult tekst for skjermlesere
srOnly skjuler teksten visuelt, men beholder den for skjermlesere. Bruk det til å gi ekstra kontekst til ikoner, knapper og lenker som ellers ville vært uklare.
Kun for skjermleser
Se Kun for skjermleser i StorybookEkstern lenke
Skjema-labels
as=label gir blokk-nivå og bunnmarg automatisk. Knytt label til feltet via htmlFor. Hvis du trenger label-stil med heading-typografi (f.eks. en større fieldset-tittel), bruk Title med as=label eller as=legend.
