Text v4.7.2

Ting å tenke på

• Semantisk

  Velg as etter hva innholdet faktisk er — p for avsnitt, strong for utheving, code for kode, label for skjema.

• Kontekstuell

  Text er for løpende tekstinnhold, ikke overskrifter. Bruk Title for overskrifter.

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.

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.

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.

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.