Flow

Components

Heading

Die Heading-Komponente wird verwendet, um Überschriften anzuzeigenGitHub

Das ist eine Überschrift

Beispiel

Das ist eine Überschrift

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

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

Level

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";

<>
  <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 die schriftgröße einer Heading angepasst werden

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

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

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

Mit Icon

Persönliche Informationen

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

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

Color Light und Dark

Dark

Das ist eine Überschrift

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

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

Light

Das ist eine Überschrift

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

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