# Heading Headings strukturieren den Inhalt einer Seite in Wichtigkeitsstufen. ```tsx import { Heading } from "@mittwald/flow-react-components"; Das ist eine Überschrift ``` --- # Best Practices - Beschreibe mit der Heading den folgenden Abschnitt eindeutig. - Formuliere die Heading kurz und sachlich. - Halte Hierarchie und Reihenfolge klar. Vermeide Sprünge, etwa von `

` zu `

`. - Verwende pro Seite nur eine `

`. --- # 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 ``` --- # Color Zusätzlich zur Standard-Color kann die Heading in **Light** und **Dark** dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt [Color](/02-foundations/01-design/02-colors#light-und-dark-color). ```tsx import { Heading } from "@mittwald/flow-react-components"; Das ist eine Überschrift ``` ```tsx import { Heading } from "@mittwald/flow-react-components"; Das ist eine Ü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 ``` --- # Kombiniere mit ... ## ContextualHelp Verwende eine [ContextualHelp](/04-components/overlays/contextual-help), 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