List Group 1.2.2

A flexible component for displaying series of content. Supports active states, actionable items, flush layout, contextual colors, and badges. Deutsch: Listengruppe

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

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.

When not

Tabular data with columns — use Data table.
Page hierarchy trails — use Breadcrumb.

Basic list group

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

An item
A second item
A third item
A fourth item
And a fifth one

<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 current item, or .disabled to grey it out.

Active item
Normal item
Disabled item

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

Action items

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

Current link A second link A third 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>

Flush

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

Flush item one
Flush item two
Flush item three

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

Contextual colors

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

Primary
Success
Danger
Warning
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>

With badges

Combine list items with badges using flex utilities.

Inbox 14
Drafts 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-current where appropriate.