List Group — Lumora

Living Documentation

List group patterns for menus, notifications, and selectable content rows

This page standardizes list group usage for simple stacks, actionable item sets, flush blocks, and richer item compositions. Use the playground to generate copy-ready patterns for settings, alerts, and mini navigation areas.

Variant matrix Action states Live controls Copy-ready snippets

Catalog Blocks 6 Variants, sizing, states, composition, snippets, playground

List Modes 4 Default, flush, numbered, and actionable patterns

Control Toggles 5 Action mode, badges, disabled item, numbering, and flush style

Preview State Action — Item 2 Updates live from playground controls

1. Variant Matrix

Core list group styles for compact content collections

Default list group

Overview
Activity
Billing
Security

Flush + numbered variants

Deploy staging build
Now
Review logs
5

Flush item A
Flush item B

2. Interaction Playground

Generate list group recipes from controls

Type

Active Item

Flush style

Numbered list

Disable item 4

Show badges

Live Output

Action Item 2

Action list, active item 2, badges enabled.

Use copy recipe for generated markup.

3. Size and Layout

Compact lists and richer two-line items for dashboard contexts

Small compact stack

Daily summary Exceptions Escalations

Two-line rows

Release notes2m

Build 3.2.1 passed smoke tests.

4. State Modeling

Active, disabled, and contextual badge states

Selectable action list

Badge states

Queued jobs4
Failed jobs1

5. Composition Patterns

Use list groups inside cards, side panels, and utility drawers

Card sidebar menu

Overview
Integrations
Audit Logs

Notification center list

New user invited Policy update published

6. Real-use Snippets

Copy-ready snippets for static, action, and numbered list groups

Static List Group

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Overview</li>
  <li class="list-group-item">Activity</li>
  <li class="list-group-item">Security</li>
</ul>

Action List Group

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">Selected</button>
  <button type="button" class="list-group-item list-group-item-action">Secondary</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Disabled</button>
</div>

Numbered + Badges

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">Deploy staging build</div>
    <span class="badge text-bg-primary rounded-pill">Now</span>
  </li>
</ol>