Listengruppe 1.2.0

A flexible Komponente for displaying series of content. Supports active states, actionable items, flush layout, contextual colors, and badges. English: List Group

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Vertical lists of related items with .velin-list-group / .velin-list-group-item.
Selectable or linked rows when you need a denser alternative to cards.

Wann nicht verwenden

Tabular data with columns — use Datentabelle.
Seite hierarchy trails — use Breadcrumb.

Einfache Listengruppe

The most basic list group is an unordered list with .velin-list-group and .velin-list-group-item.

Ein Eintrag
Ein zweiter Eintrag
Ein dritter Eintrag
Ein vierter Eintrag
Und ein fünfter

<ul class="velin-list-group">
  <li class="velin-list-group-item">An item</li>
  <li class="velin-list-group-item">A second item</li>
  <li class="velin-list-group-item">A third item</li>
  <li class="velin-list-group-item">A fourth item</li>
  <li class="velin-list-group-item">And a fifth one</li>
</ul>

Active & disabled

Add .active to highlight the aktuell item, or .disabled to grey it out.

Aktiver Eintrag
Normaler Eintrag
Deaktivierter Eintrag

<ul class="velin-list-group">
  <li class="velin-list-group-item active" aria-current="true">Active item</li>
  <li class="velin-list-group-item">Normal item</li>
  <li class="velin-list-group-item disabled" aria-disabled="true">Disabled item</li>
</ul>

Aktionszeilen

Use <a> or <Button> elements with .velin-list-group-item-action for clickable rows.

Aktueller Link Ein zweiter Link Ein dritter Link

<div class="velin-list-group">
  <a href="#" class="velin-list-group-item velin-list-group-item-action active">
    Current link
  </a>
  <a href="#" class="velin-list-group-item velin-list-group-item-action">
    A second link
  </a>
  <a href="#" class="velin-list-group-item velin-list-group-item-action">
    A third link
  </a>
</div>

Bündig

Add .velin-list-group-flush to remove borders and rounded corners — ideal for nesting inside cards.

Bündiger Eintrag eins
Bündiger Eintrag zwei
Bündiger Eintrag drei

<ul class="velin-list-group velin-list-group-flush">
  <li class="velin-list-group-item">Flush item one</li>
  <li class="velin-list-group-item">Flush item two</li>
  <li class="velin-list-group-item">Flush item three</li>
</ul>

Kontextfarben

Use .velin-list-group-item-{color} to add meaning through color.

Primary
Erfolg
Gefahr
Warnung
Info

<ul class="velin-list-group">
  <li class="velin-list-group-item velin-list-group-item-primary">Primary</li>
  <li class="velin-list-group-item velin-list-group-item-success">Success</li>
  <li class="velin-list-group-item velin-list-group-item-danger">Danger</li>
  <li class="velin-list-group-item velin-list-group-item-warning">Warning</li>
  <li class="velin-list-group-item velin-list-group-item-info">Info</li>
</ul>

Mit Badges

Combine list items with badges using flex utilities.

Posteingang 14
Entwürfe 2
Spam 99+

<ul class="velin-list-group">
  <li class="velin-list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="velin-badge velin-badge-primary rounded-pill">14</span>
  </li>
  <li class="velin-list-group-item d-flex justify-content-between align-items-center">
    Drafts
    <span class="velin-badge velin-badge-primary rounded-pill">2</span>
  </li>
  <li class="velin-list-group-item d-flex justify-content-between align-items-center">
    Spam
    <span class="velin-badge velin-badge-danger rounded-pill">99+</span>
  </li>
</ul>

Prefer semantic lists (<ul>/<li>) unless items are interactive Buttons/Links styled as rows.
Active or selected items should expose state in text or with aria-aktuell where appropriate.