List Group

List groups display a series of items: plain lists, menus of links, option pickers, inboxes and settings screens. Make items actionable, colour or number them, lay them out horizontally, or switch content panes with data-ui-toggle="list".

1Basic list

An unordered list with .list-group and .list-group-item.

Clean water
Animal rescue
Education fund
Volunteer programs

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Clean water</li>
  <li class="list-group-item">Animal rescue</li>
  <li class="list-group-item">Education fund</li>
  <li class="list-group-item">Volunteer programs</li>
</ul>

2Active and disabled

Highlight the current item and dim unavailable ones.

Current plan
Upgrade options
Enterprise (contact sales)
Billing history

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item active" aria-current="true">Current plan</li>
  <li class="list-group-item">Upgrade options</li>
  <li class="list-group-item disabled" aria-disabled="true">Enterprise (contact sales)</li>
  <li class="list-group-item">Billing history</li>
</ul>

3Links and buttons

list-group-item-action adds hover and focus states to links and buttons.

Overview Members

<div class="list-group" style="max-width: 360px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Overview</a><a href="#" class="list-group-item list-group-item-action">Members</a>
  <button type="button" class="list-group-item list-group-item-action">Integrations</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Audit log</button>
</div>

4Flush list

list-group-flush removes outer borders so the list sits flush in a parent.

Local partners
Transparent reports
Volunteer network

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Local partners</li>
  <li class="list-group-item">Transparent reports</li>
  <li class="list-group-item">Volunteer network</li>
</ul>

5Numbered list

list-group-numbered on an ol adds counters, here with extra content per item.

The simple community checklist
Jul 20, 2026
21
Elegant ways to improve your experience
Dec 1, 2025
13
3 lessons from our process
Sep 7, 2026
21

<ol class="list-group list-group-numbered" style="max-width: 420px;">
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">The simple community checklist</div><span class="small text-muted">Jul 20, 2026</span></div><span class="badge text-bg-primary rounded-full">21</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Elegant ways to improve your experience</div><span class="small text-muted">Dec 1, 2025</span></div><span class="badge text-bg-primary rounded-full">13</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">3 lessons from our process</div><span class="small text-muted">Sep 7, 2026</span></div><span class="badge text-bg-primary rounded-full">21</span></li>
</ol>

6Horizontal list

list-group-horizontal lays items in a row; -md makes it responsive.

47.3k
Visitors
276
Sign-ups
60%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-auto text-center"><div class="font-bold">47.3k</div><small class="text-muted">Visitors</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">276</div><small class="text-muted">Sign-ups</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">60%</div><small class="text-muted">Conversion</small></li>
</ul>

7Contextual colours

list-group-item-* colours individual items.

Primary item Secondary item Success item Danger item Warning item Info item Light item Dark item

<div class="list-group" style="max-width: 360px;">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
</div>

8With badges

Pill badges at the end of each item show counts.

Projects18
Tasks88
Issues5

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-folder" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-full">18</span></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-check2-square" aria-hidden="true"></i> Tasks</span><span class="badge text-bg-success rounded-full">88</span></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-exclamation-circle" aria-hidden="true"></i> Issues</span><span class="badge text-bg-danger rounded-full">5</span></li>
</ul>

9Custom content

Headings, text and meta inside each item, like a list of articles.

3 lessons from our workflow

5 days ago

The new transparent reports brings new ideas to life at a fair price.

Sofia Morgan

Powerful ways to improve your process

just now

The new tax receipts brings data easy to understand on any device.

Samir Hughes

What's new in health

just now

This honest update shows projects moving forward all year round.

Theo Mensah

<div class="list-group" style="max-width: 520px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">3 lessons from our workflow</h6>
    <small>5 days ago</small>
  </div>
  <p class="mb-1 small">The new transparent reports brings new ideas to life at a fair price.</p>
  <small class="">Sofia Morgan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Powerful ways to improve your process</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">The new tax receipts brings data easy to understand on any device.</p>
  <small class="text-muted">Samir Hughes</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">What&#39;s new in health</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">This honest update shows projects moving forward all year round.</p>
  <small class="text-muted">Theo Mensah</small></a>
</div>

10Checkbox list

Checkboxes and labels in items make a simple to-do list.

Flexible story reliable
Friendly launch clear
Flexible goal modern
Elegant workflow clear

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-982" checked><label class="form-check-label line-through text-muted" for="lg-chk-982">Flexible story reliable</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-983" checked><label class="form-check-label line-through text-muted" for="lg-chk-983">Friendly launch clear</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-984"><label class="form-check-label" for="lg-chk-984">Flexible goal modern</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-985"><label class="form-check-label" for="lg-chk-985">Elegant workflow clear</label></li>
</ul>

11Radio option list

Whole list items as labels for radio buttons, e.g. a plan picker.

Starter$9 / monthTeam$29 / monthBusiness$79 / month

<div class="list-group" style="max-width: 420px;">
  <label class="list-group-item flex gap-4" for="lg-radio-opt-987"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-987"><span><span class="block font-semibold">Starter</span><small class="text-muted">$9 / month</small></span></label>
  <label class="list-group-item flex gap-4" for="lg-radio-opt-988"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-988" checked><span><span class="block font-semibold">Team</span><small class="text-muted">$29 / month</small></span></label>
  <label class="list-group-item flex gap-4" for="lg-radio-opt-989"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-989"><span><span class="block font-semibold">Business</span><small class="text-muted">$79 / month</small></span></label>
</div>

12List as tabs

data-ui-toggle="list" turns the list into tab navigation for panes next to it.

Profile Security Notifications

This flexible update brings projects moving forward without the usual hassle.

Two-step verification is on.

This reliable journey lets time back in your day wherever you are.

<div class="row g-3">
  <div class="col-sm-4">
    <div class="list-group" role="tablist">
      <a class="list-group-item list-group-item-action active" id="lg-tab-990-tab" data-ui-toggle="list" href="#lg-tab-990" role="tab" aria-controls="lg-tab-990" aria-selected="true">Profile</a><a class="list-group-item list-group-item-action" id="lg-tab-991-tab" data-ui-toggle="list" href="#lg-tab-991" role="tab" aria-controls="lg-tab-991" aria-selected="false">Security</a><a class="list-group-item list-group-item-action" id="lg-tab-992-tab" data-ui-toggle="list" href="#lg-tab-992" role="tab" aria-controls="lg-tab-992" aria-selected="false">Notifications</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="tab-content border rounded-md p-4 h-full">
      <div class="tab-pane fade show active" id="lg-tab-990" role="tabpanel" aria-labelledby="lg-tab-990-tab">
        <p class="mb-0">This flexible update brings projects moving forward without the usual hassle.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-991" role="tabpanel" aria-labelledby="lg-tab-991-tab">
        <p class="mb-0"><i class="bi bi-shield-lock" aria-hidden="true"></i> Two-step verification is on.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-992" role="tabpanel" aria-labelledby="lg-tab-992-tab">
        <p class="mb-0">This reliable journey lets time back in your day wherever you are.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

Avatars, message and time, with a dot for unread items.

Felix Larsen5 days ago

A honest plan lets every detail in view from the very first day.

Kenji Ibrahim1 hours ago

This calm process makes results you can measure in just a few clicks.

Mateo Nguyenjust now

A honest update connects time back in your day with friendly support.

<div class="list-group" style="max-width: 440px;">
  <a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-3.svg" alt="Felix Larsen" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Felix Larsen</strong><small class="text-muted whitespace-nowrap ms-2">5 days ago</small>
    </div>
    <div class="small text-muted">
      A honest plan lets every detail in view from the very first day.
    </div>
  </div>
  <span class="p-1 bg-primary rounded-full self-center"><span class="sr-only">Unread</span></span></a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-5.svg" alt="Kenji Ibrahim" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Kenji Ibrahim</strong><small class="text-muted whitespace-nowrap ms-2">1 hours ago</small>
    </div>
    <div class="small text-muted">
      This calm process makes results you can measure in just a few clicks.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-10.svg" alt="Mateo Nguyen" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Mateo Nguyen</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      A honest update connects time back in your day with friendly support.
    </div>
  </div>
  </a>
</div>

14File list

File type icons, sizes and a download button per file.

workflow-notes-for-donors.pdf
107 KB · Dec 17, 2025
powerful-ways-to-improve-your-goal.png
504 KB · Apr 13, 2026
7-lessons-from-our-team.xlsx
832 KB · Apr 8, 2026
a-guide-to-education-fund.zip
404 KB · Nov 19, 2025

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-danger"><i class="bi bi-file-earmark-pdf" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">workflow-notes-for-donors.pdf</div><div class="small text-muted">107 KB &middot; Dec 17, 2025</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-success"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">powerful-ways-to-improve-your-goal.png</div><div class="small text-muted">504 KB &middot; Apr 13, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-primary"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">7-lessons-from-our-team.xlsx</div><div class="small text-muted">832 KB &middot; Apr 8, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-warning"><i class="bi bi-file-earmark-zip" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">a-guide-to-education-fund.zip</div><div class="small text-muted">404 KB &middot; Nov 19, 2025</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
</ul>

15Contact list

People with role and quick call and email actions.

Tariq Alvarez
Customer Success
Mia Nguyen
Data Analyst
Nora Haddad
Frontend Engineer

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-5.svg" alt="Tariq Alvarez" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Tariq Alvarez</div><div class="small text-muted">Customer Success</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Tariq"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-7.svg" alt="Mia Nguyen" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Mia Nguyen</div><div class="small text-muted">Data Analyst</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Mia"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-3.svg" alt="Nora Haddad" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Nora Haddad</div><div class="small text-muted">Frontend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Nora"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
</ul>

16Settings with switches

Each setting has an icon, a description and a switch on the right.

Push notificationsGet alerts on your phone
Weekly digestA summary every Monday
Dark modeEasier on the eyes at night

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4 py-4"><span class="text-lg text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span><label class="grow" for="lg-switch-993"><span class="block font-semibold small">Push notifications</span><span class="small text-muted">Get alerts on your phone</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-993" checked></div></li>
  <li class="list-group-item flex items-center gap-4 py-4"><span class="text-lg text-primary"><i class="bi bi-envelope" aria-hidden="true"></i></span><label class="grow" for="lg-switch-994"><span class="block font-semibold small">Weekly digest</span><span class="small text-muted">A summary every Monday</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-994" checked></div></li>
  <li class="list-group-item flex items-center gap-4 py-4"><span class="text-lg text-primary"><i class="bi bi-moon" aria-hidden="true"></i></span><label class="grow" for="lg-switch-995"><span class="block font-semibold small">Dark mode</span><span class="small text-muted">Easier on the eyes at night</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-995"></div></li>
</ul>

17Task progress list

Progress bars inside items track several jobs at once.

Friendly routine100%
Bright community37%
Focused update45%

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Friendly routine</span><span class="text-muted">100%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-success" style="width: 100%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Bright community</span><span class="text-muted">37%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 37%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Focused update</span><span class="text-muted">45%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 45%;"></div></div></li>
</ul>

18Inbox list

Unread messages in bold with a tinted edge; long lines are truncated.

Tariq Okafor07:45

Journey notes for donors

A reliable project makes decisions quicker and clearer without extra tools.

Hana Sato10:00

Inside the focused plan

This flexible release connects your work organised without the usual hassle.

Samir Larsen10:30

6 lessons from our story

Our disaster response makes customers coming back for teams of every size.

Isla Sato12:30

Inside the elegant story

A powerful journey shows the whole team on the same page all year round.

<div class="list-group" style="max-width: 560px;">
  <a href="#" class="list-group-item list-group-item-action flex gap-4 items-start ca-unread"><span class="pt-1 text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Tariq Okafor</span><small class="text-muted ms-2 whitespace-nowrap">07:45</small>
    </div>
    <div class="small truncate font-semibold">
      Journey notes for donors
    </div>
    <div class="small text-muted truncate">
      A reliable project makes decisions quicker and clearer without extra tools.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start ca-unread"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Hana Sato</span><small class="text-muted ms-2 whitespace-nowrap">10:00</small>
    </div>
    <div class="small truncate font-semibold">
      Inside the focused plan
    </div>
    <div class="small text-muted truncate">
      This flexible release connects your work organised without the usual hassle.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Samir Larsen</span><small class="text-muted ms-2 whitespace-nowrap">10:30</small>
    </div>
    <div class="small truncate text-muted">
      6 lessons from our story
    </div>
    <div class="small text-muted truncate">
      Our disaster response makes customers coming back for teams of every size.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Isla Sato</span><small class="text-muted ms-2 whitespace-nowrap">12:30</small>
    </div>
    <div class="small truncate text-muted">
      Inside the elegant story
    </div>
    <div class="small text-muted truncate">
      A powerful journey shows the whole team on the same page all year round.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ivy Varga860 pts
2Kai Sato648 pts
3Samir Tanaka534 pts
4Mia Tanaka300 pts

<ol class="list-group" style="max-width: 420px;">
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-warning ca-rank">1</span><img src="../assets/img/avatar-11.svg" alt="Ivy Varga" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ivy Varga</span><span class="small">860 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-secondary ca-rank">2</span><img src="../assets/img/avatar-6.svg" alt="Kai Sato" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Kai Sato</span><span class="small">648 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-danger ca-rank">3</span><img src="../assets/img/avatar-5.svg" alt="Samir Tanaka" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Samir Tanaka</span><span class="small">534 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-light ca-rank">4</span><img src="../assets/img/avatar-9.svg" alt="Mia Tanaka" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Mia Tanaka</span><span class="small">300 pts</span></li>
</ol>

20Reorderable list look

Grip handles signal that items can be reordered (wire up drag and drop in your app).

Volunteer network1
Secure giving2
Local partners3
Impact tracking4

<ul class="list-group" style="max-width: 420px;">
  <li class="list-group-item flex items-center gap-2"><span class="text-muted/70 ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Volunteer network</span><span class="badge bg-surface-2 text-muted">1</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-muted/70 ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Secure giving</span><span class="badge bg-surface-2 text-muted">2</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-muted/70 ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Local partners</span><span class="badge bg-surface-2 text-muted">3</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-muted/70 ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Impact tracking</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>