# Section

Eine Section erhöht die Übersichtlichkeit, indem sie den Content in vertikale Teilbereiche mit festen Abständen gliedert. Zwischen mehreren Sections wird automatisch ein Separator eingefügt, um die Bereiche optisch zu trennen.

## Guidelines

# Grundlagen

Sections sind ein häufiger Bestandteil komplexerer Components, die von dieser
strukturellen Eigenschaft profitieren. Außerdem bilden sie einen grundlegenden
Baustein, um Oberflächen aufzubauen (siehe
[Content strukturieren](/03-patterns/01-patterns/detail-page)).

## Best practices

Achte bei der Verwendung einer Section darauf, dass ...

- sie eine kurze, aussagekräftige
  [Heading](/04-components/content/heading/overview) erhält.
- bei Bedarf ein [Switch](/04-components/form-controls/switch/overview), ein
  [Link](/04-components/navigations/link/overview) oder bis zu zwei
  [Buttons](/04-components/actions/button/overview) oben in die SectionAction
  integriert werden können.
- bei mehreren Sections die wichtigste ganz oben steht.

## Verwendung

Verwende eine Section, um...

- Content in kleinere Teilbereiche zu gliedern und so die Übersichtlichkeit zu
  erhöhen.
- einzelne Teilbereiche automatisch durch einen
  [Separator](/04-components/structure/separator/overview) zu trennen, wenn
  mehrere Sections eingesetzt werden.
- Elemente vertikal zu positionieren und die korrekten Abstände sicherzustellen.
  Für horizontale Positionierungen eignet sich ein
  [ColumnLayout](/04-components/structure/column-layout/overview).

---

# Anwendung

## Abstände

Die Section sorgt automatisch für Abstände zwischen den darin platzierten
Elementen. Aufeinanderfolgende Sections werden zusätzlich durch einen
[Separator](/04-components/structure/separator/overview) getrennt. Dadurch
entsteht eine klare visuelle Struktur und Hierarchie für den Content.

Innerhalb einer Section mit einer
H2-[Heading](/04-components/content/heading/overview) kann durch weitere
H3-Headings eine Sub-Heading-Struktur aufgebaut werden. Zwischen diesen
Sub-Inhalten erscheint kein Separator, sondern sie werden durch einen größeren
Abstand optisch voneinander getrennt.

## Position

Sections werden häufig im Content-Bereich verwendet und füllen dort die gesamte
Breite aus. Wenn mehrere Sections untereinander verwendet werden, achte auf
folgende Punkte:

- Die Section mit dem wichtigsten Inhalt sollte ganz oben stehen, insbesondere
  Sections mit [AlertBadge](/04-components/status/alert-badge/overview),
  [Badges](/04-components/status/badge/overview) oder Actions (z. B.
  [Buttons](/04-components/actions/button/overview)).
- Vermeide zu viele Sections, um den User nicht zu überladen. Überlege, ob der
  Content in solchen Fällen auf mehrere Seiten oder
  [Tabs](/04-components/navigation/tabs/overview) verteilt werden sollte.

## Hierarchie

Eine Section beginnt immer mit einer
[Heading](/04-components/content/heading/overview). Darauf folgt der eigentliche
Content – also Informationen in Form von beispielsweise
[LabeledValues](/04-components/content/labeled-value/overview) oder einfachem
Text. Im unteren Bereich der Section bilden häufig
[Links](/04-components/navigation/link/overview) und
[Buttons](/04-components/actions/button/overview) den Abschluss. Im
Header-Bereich, in der sogenannten SectionAction, können prominentere Buttons
und Links platziert werden.

**✅ Do**

Erzeuge eine klare und sinnvolle Struktur innerhalb der Section.

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

<Section>
  <Heading>
    <IconStar />
    Erste Schritte
  </Heading>
  <Text>
    Im Onboarding erklären wir dir alles Wichtige – etwa die
    Organisationsstrukturen deines Hostings, das Rechte- und
    Rollensystem oder auch den Zugang über SSH.
  </Text>
  <Link href="#">Starten</Link>
</Section>
```

---

# Inhalt

## SectionAction und AlertBadge/Badge

Durch den SectionAction-Bereich im Header sowie den AlertBadge bzw. Badge lassen
sich Informationen und Interaktionen kompakt darstellen. Achte bei der
Verwendung dieser Elemente darauf, dass ...

- [AlertBadge](/04-components/status/alert-badge/overview),
  [Badges](/04-components/status/badge/overview) und Actions sich immer
  unmittelbar auf die Section beziehen, der sie zugeordnet sind.
- Die Hauptaktion der Section sich deutlich von anderen Aktionen abhebt. Dies
  gilt insbesondere, wenn 2 oder mehr Aktionen verwendet werden.

**✅ Do**

Der AlertBadge bezieht sich auf den Status der Section, der er zugeordnet ist.
  Die Hauptaktion der Section ist deutlich hervorgehoben und dauerhaft sichtbar,
  obwohl es mehrere Actions gibt.

```tsx
import {
  AlertBadge,
  Button,
  ColumnLayout,
  Content,
  CopyButton,
  Header,
  Heading,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>
      Mein Projekt
      <AlertBadge status="danger">Deaktiviert</AlertBadge>
    </Heading>

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="accent">Aktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```

**⛔️ Don't**

Der AlertBadge sollte sich nicht auf Dinge beziehen, die außerhalb der Section
  liegen. Außerdem sollte die Hauptaktion immer sichtbar sein.

```tsx
import {
  AlertBadge,
  Button,
  ColumnLayout,
  Content,
  CopyButton,
  Header,
  Heading,
  IconContextMenu,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>
      Mein Projekt
      <AlertBadge status="danger">
        Fehlende Vertragspartnerdaten
      </AlertBadge>
    </Heading>
    <Button
      variant="soft"
      color="secondary"
      aria-label="Weitere Aktionen anzeigen"
    >
      <IconContextMenu />
    </Button>
    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```

---

# Verhalten

## Responsive Layout

- Die Section passt sich der Breite des umgebenden Containers an.
- Reicht die Breite der Section nicht aus, um alle Inhalte des Header-Bereichs
  darzustellen, bricht der
  [Switch](/04-components/form-controls/switch/overview) oder brechen die
  [Buttons](/04-components/actions/button/overview) in die nächste Zeile um.
  Dort ordnen sie sich weiterhin an der rechten Seite an.
- Der [AlertBadge](/04-components/status/alert-badge/overview) bleibt immer auf
  einer Höhe mit dem Titel. Ist der Titel zu lang, wird er zweizeilig.

  

**ℹ️ Info**

Wenn die Section nicht alle Inhalte horizontal darstellen kann, springen die
    Actions in die nächste Zeile. Dort ordnen sie sich weiterhin rechts an.

```tsx
import {
  AlertBadge,
  Button,
  ColumnLayout,
  Content,
  CopyButton,
  Header,
  Heading,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>
      Mein Projekt
      <AlertBadge status="danger">Deaktiviert</AlertBadge>
    </Heading>

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="accent">Aktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```

  

**ℹ️ Info**

AlertBadge bzw. Badge und Heading bleiben immer auf einer Höhe. Ist der Text
    zu lang, bricht er in die nächste Zeile um.

```tsx
import {
  AlertBadge,
  Button,
  ColumnLayout,
  Content,
  CopyButton,
  Header,
  Heading,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>
      Mein sehr langes Projekt
      <AlertBadge status="danger">Deaktiviert</AlertBadge>
    </Heading>

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="accent">Aktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>
```