Section

Playground

Verwende <Section />, um eine Section darzustellen. Sie sorgt automatisch für feste Abstände zwischen den darin platzierten Elementen.

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

<Section>
  <Heading>Newsletter</Heading>
  <Text>
    Kommende Releases, neue Features und Tipps rund um dein
    Hosting – wir bringen dir das Wichtigste in dein
    Postfach. Abonniere unseren Newsletter und bleib auf dem
    Laufenden.
  </Text>
</Section>

Mehrere Sections

Wenn mehrere Sections untereinander platziert werden, werden sie automatisch durch einen Separator getrennt.

Sub-Headings

Sections beginnen in der Regel mit einer H2-Heading. Wenn eine feinere Unterteilung nötig ist, können Headings auf niedrigerem Level direkt in der Section platziert werden. Zur optischen Verdeutlichung erhalten Sub-Headings in der Größe H3 automatisch einen größeren Abstand zum darüberliegenden Content.

SectionAction

Die Section verfügt in der rechten oberen Ecke über einen Bereich für Actions – die sogenannte SectionAction. Dort können ein Link, ein Switch, ein oder zwei Buttons oder eine Kombination dieser Components verwendet werden.

Es können maximal zwei Buttons nebeneinander angezeigt werden. Werden mehr als zwei Aktionen benötigt, erhält die Hauptaktion einen eigenen Button, während alle weiteren in ein ContextMenu verschoben werden.

Kombiniere mit ...

AlertBadge und Badge

Die Heading kann mit einem AlertBadge oder einem Badge ergänzt werden. Dadurch wird der User schnell über den Status oder über Metadaten des Inhalts einer Section informiert.