mittwald Flow Logo

Components

Heading

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

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
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.

Das ist eine Überschrift für die eine benutzerdefinierte Größe gesetzt wurde

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

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

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

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

Das ist eine Überschrift

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 ...

Icon

Verwende <Icon />, um die Heading mit einem dekorativen Icon zu unterstützen.

Persönliche Informationen

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

<Heading>
  <IconMember />
  Persönliche Informationen
</Heading>

ContextualHelp

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

Rechte & Rollen

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.

E-Mail-Adresse
Speicherplatz voll

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

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

Overview