Section Layout

Das Block-Tag section erzeugt ein semantisches <section> Element für Inhaltsgruppen. Im Gegensatz zu vbox, welches ein <div> rendert, bietet section eine korrekte Dokumentsemantik für Barrierefreiheit und SEO.

Die section sollte für thematische Inhaltsgruppen innerhalb einer Seite, wie beispielsweise „Installation“, „Funktionen“ oder „FAQ“ verwendet werden. Für reine Layoutzwecke ohne semantische Bedeutung verwenden Sie stattdessen vbox.

Neu
WCAG AA
Block Tag

Funktionen

  • Semantisches HTML: Erzeugt ein <section>-Element für eine korrekte Dokumentstruktur.

  • id: Anker-ID für Navigationslinks (fügt automatisch scroll-mt-24 für den Versatz der festen Navigationsleiste hinzu).

  • gap: Gleichmäßige Abstände zwischen den Kind-Elementen mithilfe der Abstandsskala (xs/s/m/l/xl).

Verwendung

Die Komponente wird über das section Tag eingebunden.

{% load layout_tags %} <!-- Basic section with anchor ID --> {% section id="installation" gap="m" %} <h2>Installation</h2> <p>Follow these steps to install the package.</p> <pre><code>pip install insight-ui</code></pre> {% endsection %} <!-- Section without ID (no scroll offset) --> {% section gap="s" %} <h3>Quick Start</h3> <p>Get started in minutes.</p> {% endsection %} <!-- With accessibility label --> {% section id="features" aria_label="Product features and capabilities" %} <h2>Features</h2> <ul> <li>Feature 1</li> <li>Feature 2</li> </ul> {% endsection %} <!-- Section labeled by its heading --> {% section id="faq" aria_labelledby="faq-heading" %} <h2 id="faq-heading">Frequently Asked Questions</h2> <p>Common questions answered.</p> {% endsection %}

Parameter

Laden…

config (SectionConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
id str

Anker-ID für die Navigation (fügt scroll-mt-24 für den Versatz der festen Navigationsleiste hinzu).

 "" False
gap str

Abstand zwischen den Kind-Elementen (xs|s|m|l|xl).

 "m" False
aria_label str

Barrierefreies Label für den Abschnitt.

 "" False
aria_labelledby str

ID des Elements, welches diesen Abschnitt kennzeichnet.

 "" False
{% load layout_tags %} {% section id="installation" gap="m" %} <h2>Installation</h2> <p>Follow these steps...</p> {% endsection %} {# With accessibility label #} {% section id="features" aria_label="Product features" %} ... {% endsection %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Element <section> ist ein Orientierungsbereich, der von Screenreadern angesagt wird.

  • Verwende aria_label oder aria_labelledby, um dem Abschnitt einen aussagekräftigen Namen zu geben.

  • Jeder Abschnitt sollte idealerweise eine Überschrift (<h2>-<h6>) als erstes untergeordnetes Element enthalten.

  • Abschnitte bilden eine Dokumentgliederung, die von assistiven Technologien zur Navigation genutzt wird.

Verwandte Themen