LIST GROUP: Bordered, divided list of rows (avatar/icon + text + trailing control)
VARIANTS: Base | Flush | Action (clickable) | Active | Disabled | Sm
Consolidates the "white card + divided rows" shape hand-rolled across staff lists, draft-reply
groups, and activity logs. Use .tw-list-group as a standalone bordered container;
use .tw-list-group-flush when nesting inside an existing .tw-card-body
so the chrome doesn't double up. Rows can be static (<div>/<li>)
or actionable (<a>/<button> with .tw-list-group-item-action).
Ported per DR-2026-12.
Base: bordered, rounded, white — for a list that stands on its own, not nested in another card.
<div class="tw-list-group"><div class="tw-list-group-item">…</div></div>
Flush: drops the outer border/radius so the list reads as part of the
surrounding .tw-card instead of a card inside a card.
Thank you so much for your interest in Sixth Form at Westfield — we'd love to tell you more about our A-Level Business scholarship criteria…
It's wonderful to hear your sibling is already part of the Westfield community — we'd love to have you join us for Year 12…
<div class="tw-card-body tw:p-0"><div class="tw-list-group tw-list-group-flush">…</div></div>
Action: render the row as an <a> or <button>
with .tw-list-group-item-action for hover/focus feedback. .tw-active
marks the current selection (pair with aria-current="true"); .tw-disabled
or a real disabled attribute marks an unavailable row.
<a href="#" class="tw-list-group-item tw-list-group-item-action tw-active" aria-current="true">…</a>
Sm: tighter row padding and smaller type — an activity feed or audit trail with many rows.
<ul class="tw-list-group tw-list-group-sm" role="list"><li class="tw-list-group-item">…</li></ul>