Section

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

Best practices

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

• sie eine kurze, aussagekräftige Heading erhält.
• bei Bedarf ein Switch, ein Link oder bis zu zwei Buttons 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 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.

---

Anwendung

Abstände

Die Section sorgt automatisch für Abstände zwischen den darin platzierten Elementen. Aufeinanderfolgende Sections werden zusätzlich durch einen Separator getrennt. Dadurch entsteht eine klare visuelle Struktur und Hierarchie für den Content.

Innerhalb einer Section mit einer H2-Heading 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, Badges oder Actions (z. B. Buttons).
• Vermeide zu viele Sections, um den User nicht zu überladen. Überlege, ob der Content in solchen Fällen auf mehrere Seiten oder Tabs verteilt werden sollte.

Hierarchie

Eine Section beginnt immer mit einer Heading. Darauf folgt der eigentliche Content – also Informationen in Form von beispielsweise LabeledValues oder einfachem Text. Im unteren Bereich der Section bilden häufig Links und Buttons 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.

---

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

Don't

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

---

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 oder brechen die Buttons in die nächste Zeile um. Dort ordnen sie sich weiterhin an der rechten Seite an.
• Der AlertBadge bleibt immer auf einer Höhe mit dem Titel. Ist der Titel zu lang, wird er zweizeilig.