List Group

Flexible list components for displaying content in an ordered or unordered list format. Part of the @thenewcss/list-group addon package.

Installation

npm install @thenewcss/list-group

Basic List Group

The base .list-group creates a vertical list with bordered items.

Preview

First item
Second item
Third item
Fourth item

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Actionable Items

Add .list-group-item-action for hover effects and pointer cursor on clickable items.

Preview

Active link Regular link Another link Disabled link

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">Regular link</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Disabled link</a>
</div>

Flush

Use .list-group-flush to remove outer borders and rounded corners, useful when nesting inside cards.

Preview

Flush item one
Flush item two
Flush item three

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

Color Variants

Add color modifiers to individual items for contextual backgrounds.

Preview

Primary item
Success item
Warning item
Danger item

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

Numbered

Use .list-group-numbered for auto-incrementing numbers via CSS counters.

Preview

First numbered item
Second numbered item
Third numbered item

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First numbered item</li>
  <li class="list-group-item">Second numbered item</li>
  <li class="list-group-item">Third numbered item</li>
</ol>

Class Reference

Class	Description
`.list-group`	Flex column container with border-radius and overflow hidden.
`.list-group-item`	Individual list item with padding, border-bottom, and background.
`.list-group-item-action`	Adds hover background and pointer cursor for clickable items.
`.list-group-flush`	Removes outer borders and border-radius.
`.list-group-numbered`	Auto-incrementing numbers using CSS counters.
`.list-group-item-primary`	Blue background for primary context.
`.list-group-item-success`	Green background for success context.
`.list-group-item-warning`	Yellow background for warning context.
`.list-group-item-danger`	Red background for danger context.