# Section

Eine Section gliedert Content in Teilbereiche und trennt sie durch einen Separator.

```tsx
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>
```

---

# Best Practices

- Gib jeder Section eine kurze, aussagekräftige
  [Heading](https://flow.mittwald.de/04-components/content/heading).
- Stelle bei mehreren Sections die wichtigste nach oben. So sieht der User den
  wichtigsten oder am häufigsten genutzten Content zuerst.
- Setze Sections sparsam ein. Verteile umfangreichen Content sonst auf mehrere
  Seiten oder eine [TabNavigation](https://flow.mittwald.de/04-components/navigation/tab-navigation).
- Beziehe AlertBadge, Badge und Actions immer auf ihre eigene Section.

---

# Mehrere Sections

Werden mehrere Sections untereinander platziert, trennt sie automatisch ein
[Separator](https://flow.mittwald.de/04-components/structure/separator).

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

<>
  <Section>
    <Header>
      <Heading>Datenbanken</Heading>
      <Button>Datenbank verknüpfen</Button>
    </Header>
    <Text>
      Eine Datenbank, die mit einer App verknüpft ist, kann
      nicht gelöscht werden. Die App nutzt immer die
      verknüpfte Datenbank.
    </Text>
  </Section>
  <Section>
    <Heading>Cronjobs</Heading>
    <Text>
      Ein Cronjob ist immer fest einer App zugeordnet, du
      kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und
      löschen.
    </Text>
  </Section>
</>
```

## Sub-Headings

Sections beginnen in der Regel mit einer
H2-[Heading](https://flow.mittwald.de/04-components/content/heading). Ist eine feinere Unterteilung
nötig, platzierst du Headings auf niedrigerem Level (H3) direkt in der Section.
Sie erhalten automatisch einen größeren Abstand zum darüberliegenden Content,
statt durch einen Separator getrennt zu werden.

```tsx
import {
  Heading,
  InlineCode,
  Label,
  LabeledValue,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Heading>DNS Verwaltung</Heading>
  <Text>
    Da du externe Nameserver nutzt, empfehlen wir dir
    folgende Records bei deinem Provider einzutragen.
  </Text>
  <Heading level={3}>A-Record</Heading>
  <LabeledValue>
    <Label>IPv4-Adresse</Label>
    <InlineCode>12.123.123.12</InlineCode>
  </LabeledValue>
</Section>
```

---

# SectionAction

In der rechten oberen Ecke bietet die Section einen Bereich für Actions – die
SectionAction. Dort kannst du einen [Link](https://flow.mittwald.de/04-components/navigation/link),
einen [Switch](https://flow.mittwald.de/04-components/form-controls/switch),
[Buttons](https://flow.mittwald.de/04-components/actions/button) oder eine Kombination dieser Components
platzieren.

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

<Section>
  <Header>
    <Heading>Newsletter</Heading>
    <Link href="#">Zur Anmeldung</Link>
  </Header>
  <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>
```

```tsx
import {
  Header,
  Heading,
  Label,
  Section,
  Switch,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Autoresponder</Heading>
    <Switch>
      <Label>Aktivieren</Label>
    </Switch>
  </Header>
  <Text>
    Lasse den Autoresponder für dich arbeiten. Er kann
    automatisch auf eingehende E-Mails antworten.
  </Text>
</Section>
```

Es lassen sich mehrere Buttons nebeneinander anzeigen. Werden jedoch mehr als
zwei bis drei Actions nötig, behält die Hauptaktion ihren eigenen Button und
alle weiteren wandern in ein [ContextMenu](https://flow.mittwald.de/04-components/actions/context-menu).

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

<Section>
  <Header>
    <Heading>Mein Projekt</Heading>

    <ContextMenuTrigger>
      <Button
        variant="soft"
        color="secondary"
        aria-label="Weitere Aktionen anzeigen"
      >
        <IconContextMenu />
      </Button>
      <ContextMenu aria-label="Weitere Aktionen">
        <MenuItem>Datenbank migrieren</MenuItem>
        <MenuItem>Volume migrieren</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>

    <Button color="danger">Deaktivieren</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>
```

---

# Kombiniere mit ...

## AlertBadge und Badge

Ergänze die [Heading](https://flow.mittwald.de/04-components/content/heading) mit einem
[AlertBadge](https://flow.mittwald.de/04-components/status/alert-badge) oder einem
[Badge](https://flow.mittwald.de/04-components/status/badge), um den User schnell über den Status oder
Metadaten des Inhalts einer Section zu informieren.

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

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

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="success">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>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |