List Group

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

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>