# Heading Headings strukturieren den Inhalt der Seite. Jede Heading hat dabei eine unterschiedliche Wichtigkeitsstufe. ## Overview # Playground Verwende ``, um eine Heading darzustellen. ```tsx import { Heading } from "@mittwald/flow-react-components"; Das ist eine Überschrift ``` --- # 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"; <> Das ist eine Level 1 Überschrift Das ist eine Level 2 Überschrift Das ist eine Level 3 Überschrift Das ist eine Level 4 Überschrift Das ist eine Level 5 Überschrift ``` --- # 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"; Das ist eine Überschrift für die eine benutzerdefinierte Größe gesetzt wurde ``` --- # 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"; Das ist eine Überschrift ``` ```tsx import { Heading } from "@mittwald/flow-react-components"; Das ist eine Überschrift ``` **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 ``, 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"; Rechte & Rollen