# Heading

Headings strukturieren den Inhalt der Seite. Jede Heading hat dabei eine unterschiedliche Wichtigkeitsstufe.

## Overview

# Playground

Verwende `<Heading />`, um eine Heading darzustellen.

```tsx
import { Heading } from "@mittwald/flow-react-components";

<Heading>Das ist eine Überschrift</Heading>
```

---

# Level

Über das Property `level` kann die Hierarchie der Heading angepasst werden.
Standardmäßig wird eine Heading mit dem Level `H2` erzeugt. Die Seite sollte
eine sinnvolle Struktur mit verschiedenen Ebenen aufweisen.

```tsx
import { Heading } from "@mittwald/flow-react-components";

<>
  <Heading level={1}>
    Das ist eine Level 1 Überschrift
  </Heading>
  <Heading level={2}>
    Das ist eine Level 2 Überschrift
  </Heading>
  <Heading level={3}>
    Das ist eine Level 3 Überschrift
  </Heading>
  <Heading level={4}>
    Das ist eine Level 4 Überschrift
  </Heading>
  <Heading level={5}>
    Das ist eine Level 5 Überschrift
  </Heading>
</>
```

---

# Size

Über das Property `size` kann in Ausnahmefällen die Schriftgröße einer Heading
manuell angepasst werden. Die Headings sollten dabei eine visuelle Hierarchie
beibehalten.

```tsx
import { Heading } from "@mittwald/flow-react-components";

<Heading level={2} size="xs">
  Das ist eine Überschrift für die eine benutzerdefinierte
  Größe gesetzt wurde
</Heading>
```

---

# Color

Zusätzlich zu der Standard-Color, kann die Heading in **Light** und **Dark**
dargestellt werden. Beide Colors eigenen sich, wenn die Standardfarbe auf
farbigen oder dekorativen Hintergründen nicht gut funktioniert.

```tsx
import { Heading } from "@mittwald/flow-react-components";

<Heading color="dark">Das ist eine Überschrift</Heading>
```

```tsx
import { Heading } from "@mittwald/flow-react-components";

<Heading color="light">Das ist eine Überschrift</Heading>
```

**Light:** Verwende die Light-Color bei dunklen Hintergründen mit einem
HSL-Lightness-Wert unter 50.

**Dark:** Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem
HSL-Lightness-Wert über 50.

---

# Kombiniere mit ...

## ContextualHelp

Verwende `<ContextualHelp />`, um Usern zusätzliche Hilfestellungen zu geben
(z. B. bei Fachbegriffen).

```tsx
import { Heading } from "@mittwald/flow-react-components";
import { Button } from "@mittwald/flow-react-components";
import {
  ContextualHelp,
  ContextualHelpTrigger,
} from "@mittwald/flow-react-components";
import { Text } from "@mittwald/flow-react-components";

<Heading>
  Rechte & Rollen
  <ContextualHelpTrigger>
    <Button />
    <ContextualHelp>
      <Text>
        Weitere Informationen zum Thema Rechte & Rollen
      </Text>
    </ContextualHelp>
  </ContextualHelpTrigger>
</Heading>
```

## Badge oder AlertBadge

Verwende `<Badge />`, um wichtige Metainformationen zu einem Abschnitt
hervorzuheben, oder eine `<AlertBadge/>`, um einen Status anzuzeigen.

```tsx
import {
  AlertBadge,
  Heading,
} from "@mittwald/flow-react-components";

<Heading>
  E-Mail-Adresse
  <AlertBadge status="danger">
    Speicherplatz voll
  </AlertBadge>
</Heading>
```