List groups

One list-group class arranges ordinary list items with shared surface colours, borders, shape and density. Native lists without this class retain their existing typography.

Usage

Markup: ul.list-group or ol.list-group

Behaviour: Ordinary collections, not interactive listboxes.

Use ul for an unordered collection and ol when order matters. Keep role="list" because list-style:none can affect list announcements in some browsers.
Use links for destinations. A list item needs no extra class; its only-child link gets a comfortable minimum target height. Do not use listbox roles for ordinary navigation.
aria-current marks the actual current destination. Status badges remain passive content inside a list item.

Component API and styling module · Inherited appearance settings

Text items with badges

Standard list markup supports richer content without per-item classes.

Profile Complete
Billing Review needed
Notifications enabled

<ul class="list-group" role="list">
  <li>Profile <span class="badge" data-variant="success">Complete</span></li>
  <li>Billing <span class="badge" data-variant="warning">Review needed</span></li>
  <li>Notifications enabled</li>
</ul>

Linked items

A labelled navigation landmark contains real documentation destinations.

<nav aria-label="Related documentation">
  <ul class="list-group" role="list">
    <li><a href="/RevaCSS/guide/">Getting started</a></li>
    <li><a href="/RevaCSS/attributes/">Shared attributes</a></li>
    <li><a href="/RevaCSS/components/lists/" aria-current="page">List groups</a></li>
  </ul>
</nav>