List

Listen sind eine strukturierte Darstellung von Informationen.
Sie können verwendet werden, um Elemente in einer hierarchischen Struktur darzustellen.

Beispiele

List basic

Die grundlegende Listendarstellung mit der Klasse .a-list.

Item 1
Item 2
Item 3


<ul class="a-list">
    <li class="a-list__item">Item 1</li>
    <li class="a-list__item">Item 2</li>
    <li class="a-list__item">Item 3</li>
</ul>

List nested

Verschachtelte Listen können durch einfaches Einfügen einer weiteren <ul> innerhalb eines <li>-Elements erstellt werden.

Primary
- Primary with Icon
- Primary disabled
Secondary


<ul class="a-list">
    <li class="a-list__item">
        Primary
        <ul class="a-list">
            <li class="a-list__item">Primary with Icon</li>
            <li class="a-list__item">Primary disabled</li>
        </ul>
    </li>
    <li class="a-list__item">Secondary</li>
</ul>

List unstyled

Die Klasse .a-list.-unstyled entfernt die Aufzählungszeichen und die Einrückung der Liste.

Ohne Bullet 1
Ohne Bullet 2
Ohne Bullet 3


<ul class="a-list -unstyled">
    <li class="a-list__item">Ohne Bullet 1</li>
    <li class="a-list__item">Ohne Bullet 2</li>
    <li class="a-list__item">Ohne Bullet 3</li>
</ul>

List spaced

Die Klasse .a-list.-spaced erhöht den Abstand zwischen den Listenelementen.

Item 1
Item 2
Item 3


<ul class="a-list -spaced">
    <li class="a-list__item">Item 1</li>
    <li class="a-list__item">Item 2</li>
    <li class="a-list__item">Item 3</li>
</ul>

Klassen

Klasse	Beschreibung
`.a-list`	Basis-Klasse für Listen.
`.a-list__item`	Listenelement innerhalb einer Liste.
`.a-list.-unstyled`	Entfernt Aufzählungszeichen und Einrückung.
`.a-list.-spaced`	Erhöht den Abstand zwischen den Listenelementen.

Hinweise

Verschachtelte Listen sollten immer innerhalb eines <li>-Elements stehen.

Accessibility

Listen sollten für echte Aufzählungen oder strukturierte Inhalte verwendet werden, nicht als reines Layout-Werkzeug.