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.

Education fund
Disaster response
Volunteer programs
Clean water

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Education fund</li>
  <li class="list-group-item">Disaster response</li>
  <li class="list-group-item">Volunteer programs</li>
  <li class="list-group-item">Clean water</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.

Volunteer network
Transparent reports
Local partners

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

5Numbered list

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

Five things we learned this year
May 25, 2026
11
Stories from the families we support
Mar 23, 2026
17
Looking back at a busy season
Jul 24, 2026
15

<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">Five things we learned this year</div><span class="small text-muted">May 25, 2026</span></div><span class="badge text-bg-primary rounded-full">11</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Stories from the families we support</div><span class="small text-muted">Mar 23, 2026</span></div><span class="badge text-bg-primary rounded-full">17</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Looking back at a busy season</div><span class="small text-muted">Jul 24, 2026</span></div><span class="badge text-bg-primary rounded-full">15</span></li>
</ol>

6Horizontal list

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

45.1k
Visitors
518
Sign-ups
21%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-auto text-center"><div class="font-bold">45.1k</div><small class="text-muted">Visitors</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">518</div><small class="text-muted">Sign-ups</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">21%</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.

Projects24
Tasks32
Issues4

<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">24</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">32</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">4</span></li>
</ul>

9Custom content

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

Our favourite tips for busy weeks

39 min ago

Friendly people answer your questions quickly, by phone, chat or email.

Ruby Whitaker

How to choose the right campaign

yesterday

Volunteers give their time in schools, shelters and food banks every week.

Felix Larsen

Meet the partners behind our water projects

9 hours ago

Monthly gifts let us plan ahead and respond quickly when disaster strikes.

Chloe Morgan

<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">Our favourite tips for busy weeks</h6>
    <small>39 min ago</small>
  </div>
  <p class="mb-1 small">Friendly people answer your questions quickly, by phone, chat or email.</p>
  <small class="">Ruby Whitaker</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">How to choose the right campaign</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Volunteers give their time in schools, shelters and food banks every week.</p>
  <small class="text-muted">Felix Larsen</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Meet the partners behind our water projects</h6>
    <small>9 hours ago</small>
  </div>
  <p class="mb-1 small">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
  <small class="text-muted">Chloe Morgan</small></a>
</div>

10Checkbox list

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

Fast journey flexible
Modern process practical
Elegant idea simple
Reliable story secure

<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">Fast journey flexible</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">Modern process practical</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">Elegant idea simple</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">Reliable story secure</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

We have helped more than two hundred thousand people since we started.

Two-step verification is on.

Clean water wells are built with and maintained by local communities.

<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">We have helped more than two hundred thousand people since we started.</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">Clean water wells are built with and maintained by local communities.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Sofia Novak40 min ago

We keep things simple, so you can focus on what matters to you.

Mateo Haddadyesterday

Our annual report is independently audited and published in full.

Arjun Duarte4 days ago

Monthly gifts let us plan ahead and respond quickly when disaster strikes.

<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-11.svg" alt="Sofia Novak" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Sofia Novak</strong><small class="text-muted whitespace-nowrap ms-2">40 min ago</small>
    </div>
    <div class="small text-muted">
      We keep things simple, so you can focus on what matters to you.
    </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-2.svg" alt="Mateo Haddad" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Mateo Haddad</strong><small class="text-muted whitespace-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-muted">
      Our annual report is independently audited and published in full.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-12.svg" alt="Arjun Duarte" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Arjun Duarte</strong><small class="text-muted whitespace-nowrap ms-2">4 days ago</small>
    </div>
    <div class="small text-muted">
      Monthly gifts let us plan ahead and respond quickly when disaster strikes.
    </div>
  </div>
  </a>
</div>

14File list

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

why-we-plant-trees-with-the-schools-we-build.pdf
65 KB · Aug 23, 2026
ten-ways-to-fundraise-with-friends.png
419 KB · Oct 23, 2025
what-our-donors-asked-us-most.xlsx
4 KB · Nov 30, 2025
a-beginner-s-guide-to-getting-started.zip
195 KB · Jun 15, 2026

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-danger-emphasis"><i class="bi bi-file-earmark-pdf" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">why-we-plant-trees-with-the-schools-we-build.pdf</div><div class="small text-muted">65 KB &middot; Aug 23, 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-success-emphasis"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">ten-ways-to-fundraise-with-friends.png</div><div class="small text-muted">419 KB &middot; Oct 23, 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-primary-ink"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">what-our-donors-asked-us-most.xlsx</div><div class="small text-muted">4 KB &middot; Nov 30, 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-warning-emphasis"><i class="bi bi-file-earmark-zip" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">a-beginner-s-guide-to-getting-started.zip</div><div class="small text-muted">195 KB &middot; Jun 15, 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>
</ul>

15Contact list

People with role and quick call and email actions.

Mason Kowalski
QA Engineer
Jonah Ashford
Operations Manager
Omar Hughes
Sales Executive

<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="Mason Kowalski" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Mason Kowalski</div><div class="small text-muted">QA Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Mason"><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-2.svg" alt="Jonah Ashford" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Jonah Ashford</div><div class="small text-muted">Operations Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Jonah"><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-9.svg" alt="Omar Hughes" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Omar Hughes</div><div class="small text-muted">Sales Executive</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Omar"><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-ink"><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-ink"><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-ink"><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.

Honest journey100%
Secure journey73%
Reliable launch81%

<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">Honest journey</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">Secure journey</span><span class="text-muted">73%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 73%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Reliable launch</span><span class="text-muted">81%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 81%;"></div></div></li>
</ul>

18Inbox list

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

Theo Moreau15:30

What our donors asked us most

Volunteers give their time in schools, shelters and food banks every week.

Nadia Quinn14:00

How your donations built three new classrooms

We measure success by how many donors come back and tell their friends.

Owen Nguyen10:30

Meet the partners behind our water projects

Every donation is tax-deductible, and receipts arrive by email instantly.

Leo Brennan11:15

The small habits that make a big difference

We listen first, then build a plan around what you actually need.

<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-emphasis"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Theo Moreau</span><small class="text-muted ms-2 whitespace-nowrap">15:30</small>
    </div>
    <div class="small truncate font-semibold">
      What our donors asked us most
    </div>
    <div class="small text-muted truncate">
      Volunteers give their time in schools, shelters and food banks every week.
    </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-emphasis"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Nadia Quinn</span><small class="text-muted ms-2 whitespace-nowrap">14:00</small>
    </div>
    <div class="small truncate font-semibold">
      How your donations built three new classrooms
    </div>
    <div class="small text-muted truncate">
      We measure success by how many donors come back and tell their friends.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Owen Nguyen</span><small class="text-muted ms-2 whitespace-nowrap">10:30</small>
    </div>
    <div class="small truncate text-muted">
      Meet the partners behind our water projects
    </div>
    <div class="small text-muted truncate">
      Every donation is tax-deductible, and receipts arrive by email instantly.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Leo Brennan</span><small class="text-muted ms-2 whitespace-nowrap">11:15</small>
    </div>
    <div class="small truncate text-muted">
      The small habits that make a big difference
    </div>
    <div class="small text-muted truncate">
      We listen first, then build a plan around what you actually need.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ravi Ortega1112 pts
2Aria Carter894 pts
3Liam Lindqvist550 pts
4Hana Varga234 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-1.svg" alt="Ravi Ortega" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ravi Ortega</span><span class="small">1112 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-1.svg" alt="Aria Carter" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Aria Carter</span><span class="small">894 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-6.svg" alt="Liam Lindqvist" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Liam Lindqvist</span><span class="small">550 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-3.svg" alt="Hana Varga" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Hana Varga</span><span class="small">234 pts</span></li>
</ol>

20Reorderable list look

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

Transparent reports1
Local partners2
Tax receipts3
Secure giving4

<ul class="list-group" style="max-width: 420px;">
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Transparent reports</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-tertiary 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">2</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Tax receipts</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-tertiary 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">4</span></li>
</ul>