Das ist eine Überschrift
Playground
Verwende <Heading />, um eine Heading darzustellen.
Das ist eine Überschrift
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.
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.
Das ist eine Überschrift für die eine benutzerdefinierte Größe gesetzt wurde
Color
Die Heading wird standardmäßig in der Color Primary dargestellt.
Light und Dark
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.
Das ist eine Überschrift
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 ...
Icon
Verwende <Icon />, um die Heading mit einem dekorativen Icon zu unterstützen.
Persönliche Informationen
ContextualHelp
Verwende <ContextualHelp />, um Usern zusätzliche Hilfestellungen zu geben
(z. B. bei Fachbegriffen).
Rechte & Rollen
Badge oder AlertBadge
Verwende <Badge />, um wichtige Metainformationen zu einem Abschnitt
hervorzuheben, oder eine <AlertBadge/>, um einen Status anzuzeigen.