Title v4.7.2

Ting å tenke på

• Semantisk

  Velg as for riktig dokument-hierarki (h1–h6) eller skjema-rolle (label/legend) — ikke etter visuell størrelse.

• Frakoblet

  as og size er bevisst frakoblet. En h2 kan ha hvilken som helst visuell størrelse.

Retningslinjer

as og size er frakoblet

as styrer det semantiske elementet (h1–h6, label, legend) og dermed dokumentets heading-hierarki for skjermlesere og SEO. size styrer hvor stor tittelen ser ut visuelt. De to skal velges uavhengig: hvis en seksjon trenger en h1 for tilgjengelighet, men designet ikke vil ha en dominerende tittel, hold as=h1 og velg en mindre size.

Størrelser

Title har fem størrelser fra xs til xl. Default er l. Hver størrelse mapper til en komplett tekst-stil i tokens — både font-size, line-height, font-weight og ikon-vekt følger med.

Sammen med kort og brødtekst

Title fungerer godt sammen med Text-komponenten i Card. La default-verdiene styre i de fleste tilfeller — da skriver du minst mulig kode og får konsistent typografi på tvers.

Tilgjengelighet

Skjult overskrift for skjermlesere

srOnly skjuler tittelen visuelt, men beholder den i skjermlesere. Nyttig for landemerker (navigation, main, complementary) som allerede har visuell kontekst, men hvor du vil bevare hierarkiet for assistive teknologier.

Skjema-grupperinger

Title kan rendres som label og legend i tillegg til h1–h6. Det er nyttig når du vil ha heading-typografi på et skjema-element. as=label gir automatisk blokk-nivå og bunnmarg, og både label og legend får normal font-weight (ikke bold) som passer skjema-tekst.

h1 med lav visuell vekt

Hver side trenger en h1 for skjermlesere og SEO. Hvis designet ikke har plass til en dominerende tittel, sett as=h1 men velg en mindre size som passer designet.