Beta

Heading

Heading brukes til overskrifter og titler. Semantisk nivå (h1–h6) og visuell størrelse er uavhengige — du kan for eksempel ha en h2 som ser ut som en h1.

Utforsk

Overskrift

size

children

<Heading size="2xl" as="h2">Overskrift</Heading>

Importering

import { Heading } from "@kilden/designsystem";

Størrelser

<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Heading size="3xl">Størrelse 3xl</Heading>
<Heading size="2xl">Størrelse 2xl (standard)</Heading>
<Heading size="xl">Størrelse xl</Heading>
<Heading size="lg">Størrelse lg</Heading>
</div>

Semantisk nivå

Bruk as-prop for å kontrollere HTML-elementet uavhengig av visuell størrelse:

<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
<Heading as="h1" size="3xl">h1 — størrelse 3xl</Heading>
<Heading as="h2" size="2xl">h2 — størrelse 2xl</Heading>
<Heading as="h3" size="xl">h3 — størrelse xl</Heading>
<Heading as="h4" size="lg">h4 — størrelse lg</Heading>
</div>

Frikobling av nivå og størrelse

Semantisk og visuell størrelse kan settes uavhengig av hverandre:

{
  /* Semantisk h2, men ser ut som en h1 */
}
<Heading as="h2" size="3xl">
  Stor seksjonstittel
</Heading>;
 
{
  /* Semantisk h1, men kompakt visuell størrelse */
}
<Heading as="h1" size="lg">
  Liten sidetopp
</Heading>;

Bruksanbefalinger

Sidetopp

Seksjon

Bruk riktig semantisk nivå

Overskriftshierarkiet (h1 → h2 → h3) skal alltid følge dokumentstrukturen, uavhengig av visuell størrelse.

Sidetopp

Seksjon (feil nivå)

Ikke hopp over nivåer

Unngå å hoppe fra h1 direkte til h3 — det bryter med tilgjengelighetsstandarden.

Tilgjengelighet

Rendres som h2 som standard — husk å sette as til riktig nivå for konteksten
Semantisk nivå bestemmer skjermleseropplesing og dokumentoversikt

Props

Prop	Type	Default	Beskrivelse
`size`	`"3xl" \| "2xl" \| "xl" \| "lg"`	`"2xl"`	Visuell størrelse
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h2"`	Semantisk HTML-element
`asChild`	`boolean`	`false`	Rendrer barn-elementet som overskriften (Radix Slot)