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.

Health check-ups
Telehealth
Dental care
General practice

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Health check-ups</li>
  <li class="list-group-item">Telehealth</li>
  <li class="list-group-item">Dental care</li>
  <li class="list-group-item">General practice</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.

Online results
Reminders
Certified specialists

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Online results</li>
  <li class="list-group-item">Reminders</li>
  <li class="list-group-item">Certified specialists</li>
</ul>

5Numbered list

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

A guide to telehealth
Feb 3, 2026
25
Goal notes for patients
Sep 16, 2026
13
Dashboard notes for patients
Nov 27, 2025
4

<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">A guide to telehealth</div><span class="small text-muted">Feb 3, 2026</span></div><span class="badge text-bg-primary rounded-full">25</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Goal notes for patients</div><span class="small text-muted">Sep 16, 2026</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">Dashboard notes for patients</div><span class="small text-muted">Nov 27, 2025</span></div><span class="badge text-bg-primary rounded-full">4</span></li>
</ol>

6Horizontal list

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

67.3k
Visitors
846
Sign-ups
88%
Conversion

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

Projects14
Tasks58
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">14</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">58</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.

How we rebuilt our goal

yesterday

A reliable journey connects complex tasks into simple steps on any device.

Mateo Varga

Friendly ways to improve your community

12 hours ago

This friendly process turns new ideas to life in just a few clicks.

Mateo Okafor

Dashboard notes for patients

5 days ago

This focused idea guides every detail in view at a fair price.

Mia Alvarez

<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">How we rebuilt our goal</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">A reliable journey connects complex tasks into simple steps on any device.</p>
  <small class="">Mateo Varga</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Friendly ways to improve your community</h6>
    <small>12 hours ago</small>
  </div>
  <p class="mb-1 small">This friendly process turns new ideas to life in just a few clicks.</p>
  <small class="text-muted">Mateo Okafor</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Dashboard notes for patients</h6>
    <small>5 days ago</small>
  </div>
  <p class="mb-1 small">This focused idea guides every detail in view at a fair price.</p>
  <small class="text-muted">Mia Alvarez</small></a>
</div>

10Checkbox list

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

Modern launch flexible
Bright goal powerful
Calm story elegant
Focused story reliable

<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">Modern launch 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">Bright goal powerful</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">Calm story elegant</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">Focused story reliable</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

A secure journey keeps you focused on what matters without extra tools.

Two-step verification is on.

This honest launch turns every detail in view in just a few clicks.

<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">A secure journey keeps you focused on what matters without extra tools.</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 honest launch turns every detail in view in just a few clicks.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Nadia Silvajust now

A powerful journey connects data easy to understand all year round.

Maya Delgado10 hours ago

Our lab tests gives time back in your day wherever you are.

Samir Lindqvist44 min ago

A secure story shows you focused on what matters at a fair price.

<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="Nadia Silva" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Nadia Silva</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      A powerful journey connects data easy to understand all year round.
    </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="Maya Delgado" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Maya Delgado</strong><small class="text-muted whitespace-nowrap ms-2">10 hours ago</small>
    </div>
    <div class="small text-muted">
      Our lab tests gives time back in your day wherever you are.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-2.svg" alt="Samir Lindqvist" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Samir Lindqvist</strong><small class="text-muted whitespace-nowrap ms-2">44 min ago</small>
    </div>
    <div class="small text-muted">
      A secure story shows you focused on what matters at a fair price.
    </div>
  </div>
  </a>
</div>

14File list

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

how-we-rebuilt-our-project.pdf
855 KB · Feb 23, 2026
simple-ways-to-improve-your-dashboard.png
877 KB · Nov 8, 2025
inside-the-fast-workflow.xlsx
662 KB · Feb 1, 2026
6-lessons-from-our-process.zip
486 KB · Dec 28, 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">how-we-rebuilt-our-project.pdf</div><div class="small text-muted">855 KB &middot; Feb 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"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">simple-ways-to-improve-your-dashboard.png</div><div class="small text-muted">877 KB &middot; Nov 8, 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"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">inside-the-fast-workflow.xlsx</div><div class="small text-muted">662 KB &middot; Feb 1, 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">6-lessons-from-our-process.zip</div><div class="small text-muted">486 KB &middot; Dec 28, 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.

Luna Moreau
Finance Lead
Ella Lindqvist
Frontend Engineer
Samir Rossi
Project Manager

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-11.svg" alt="Luna Moreau" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Luna Moreau</div><div class="small text-muted">Finance Lead</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Luna"><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-11.svg" alt="Ella Lindqvist" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Ella Lindqvist</div><div class="small text-muted">Frontend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ella"><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-12.svg" alt="Samir Rossi" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Samir Rossi</div><div class="small text-muted">Project Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Samir"><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.

Fast update100%
Smart goal70%
Honest release21%

<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">Fast update</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">Smart goal</span><span class="text-muted">70%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 70%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Honest release</span><span class="text-muted">21%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 21%;"></div></div></li>
</ul>

18Inbox list

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

Luna Moreau10:00

3 lessons from our idea

The new certified specialists guides customers coming back wherever you are.

Jonah Moreau10:15

A guide to physiotherapy

This secure plan lets the whole team on the same page all year round.

Nadia Kim11:45

Inside the elegant release

The new same-day appointments lets customers coming back all year round.

Finn Mensah11:45

Secure ways to improve your story

The new certified specialists makes projects moving forward from the very first day.

<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">Luna Moreau</span><small class="text-muted ms-2 whitespace-nowrap">10:00</small>
    </div>
    <div class="small truncate font-semibold">
      3 lessons from our idea
    </div>
    <div class="small text-muted truncate">
      The new certified specialists guides customers coming back wherever you are.
    </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">Jonah Moreau</span><small class="text-muted ms-2 whitespace-nowrap">10:15</small>
    </div>
    <div class="small truncate font-semibold">
      A guide to physiotherapy
    </div>
    <div class="small text-muted truncate">
      This secure plan lets the whole team on the same page all year round.
    </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="">Nadia Kim</span><small class="text-muted ms-2 whitespace-nowrap">11:45</small>
    </div>
    <div class="small truncate text-muted">
      Inside the elegant release
    </div>
    <div class="small text-muted truncate">
      The new same-day appointments lets customers coming back all year round.
    </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="">Finn Mensah</span><small class="text-muted ms-2 whitespace-nowrap">11:45</small>
    </div>
    <div class="small truncate text-muted">
      Secure ways to improve your story
    </div>
    <div class="small text-muted truncate">
      The new certified specialists makes projects moving forward from the very first day.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ivy Larsen1124 pts
2Ella Larsen699 pts
3Arjun Alvarez486 pts
4Lucas Brennan214 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-5.svg" alt="Ivy Larsen" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ivy Larsen</span><span class="small">1124 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-9.svg" alt="Ella Larsen" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ella Larsen</span><span class="small">699 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-9.svg" alt="Arjun Alvarez" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Arjun Alvarez</span><span class="small">486 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-12.svg" alt="Lucas Brennan" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Lucas Brennan</span><span class="small">214 pts</span></li>
</ol>

20Reorderable list look

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

Online results1
Reminders2
Insurance friendly3
Certified specialists4

<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">Online results</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">Reminders</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">Insurance friendly</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">Certified specialists</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>