# Heading

> Overskriftskomponent med konfigurerbart semantisk nivå og visuell størrelse.

[Kildekode på GitHub](https://github.com/bekk/designsystem/blob/main/packages/designsystem/src/ui/heading.tsx)

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

*Se interaktiv playground på dokumentasjonssiden.*

## Importering

```tsx

```

## Størrelser

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

## Semantisk nivå

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

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

## Frikobling av nivå og størrelse

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

```tsx
{
  /* Semantisk h2, men ser ut som en h1 */
}

  Stor seksjonstittel
;

{
  /* Semantisk h1, men kompakt visuell størrelse */
}

  Liten sidetopp
;
```

## Bruksanbefalinger

  - **Gjør: Bruk riktig semantisk nivå** — Overskriftshierarkiet (h1 → h2 → h3) skal alltid følge dokumentstrukturen, uavhengig av visuell størrelse.
  - **Unngå: 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) |