Title v6.0.0

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.

• Semantikk og stil frakoblet

  Se Semantikk og stil frakoblet i Storybook

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.

• Sizes

  Se Sizes i Storybook

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.

• I kort

  Se I kort i Storybook

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.

• Kun for skjermleser

  Se Kun for skjermleser i Storybook

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.

• I skjema

  Se I skjema i Storybook

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.

• Semantisk h1 med lav visuell vekt

  Se Semantisk h1 med lav visuell vekt i Storybook

Relaterte komponenter

• Text