LIST GROUP: Settled vertical list of rows sharing one outer surface
VARIANTS: Static | Action (links) | Active/Disabled | Flush (inside .card) | Numbered
Use for settings/navigation lists, document checklists, and activity feeds — anywhere a
set of peer rows needs one shared border and background rather than individually spaced
cards. For a single free-standing block of content, use .card instead.
Plain rows: non-interactive content, e.g. a document checklist.
<ul class="list-group"><li class="list-group-item">…</li></ul>
.list-group-item-action: hover fills line-muted and inks
link-blue; each row is keyboard-focusable with a visible ring.
<a href="…" class="list-group-item list-group-item-action">…</a>
.active: link-blue ink + link-subtle wash marks the current
step — a plain <li>, not a link or button, so it never carries
.list-group-item-action (no hover/cursor affordance for something that
isn't clickable). .disabled: muted, non-interactive — a step not yet
reachable.
<li class="list-group-item active" aria-current="true">…</li> ·
<li class="list-group-item disabled" aria-disabled="true">…</li>
.list-group-flush: drops the outer border/radius so the list sits
flush inside a .card's own surface — pair with .card-body.tw:p-0.
<div class="card-body tw:p-0"><ul class="list-group list-group-flush">…</ul></div>
.list-group-numbered: CSS-counter number prefix — no manual "1. " text.
<ol class="list-group list-group-numbered"><li class="list-group-item">…</li></ol>