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.

30-day returns
Free shipping
Secure checkout
Loyalty rewards

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">30-day returns</li>
  <li class="list-group-item">Free shipping</li>
  <li class="list-group-item">Secure checkout</li>
  <li class="list-group-item">Loyalty rewards</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.

Sustainable materials
Member prices
Secure payments

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Sustainable materials</li>
  <li class="list-group-item">Member prices</li>
  <li class="list-group-item">Secure payments</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 13, 2026
4
How to choose the right product
Jul 22, 2026
27
Our guide to gifts under $50
Nov 16, 2025
2

<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 13, 2026</span></div><span class="badge text-bg-primary rounded-full">4</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">How to choose the right product</div><span class="small text-muted">Jul 22, 2026</span></div><span class="badge text-bg-primary rounded-full">27</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Our guide to gifts under $50</div><span class="small text-muted">Nov 16, 2025</span></div><span class="badge text-bg-primary rounded-full">2</span></li>
</ol>

6Horizontal list

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

25.0k
Visitors
738
Sign-ups
8%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-auto text-center"><div class="font-bold">25.0k</div><small class="text-muted">Visitors</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">738</div><small class="text-muted">Sign-ups</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">8%</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
Tasks77
Issues3

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-folder-fill" 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">77</span></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Issues</span><span class="badge text-bg-danger rounded-full">3</span></li>
</ul>

9Custom content

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

What to pack for a rainy weekend outdoors

just now

Free shipping on orders over $50 and easy returns within 30 days.

Ruby Moreau

Styling one piece three different ways

3 days ago

Our packaging is plastic-free and every delivery is carbon-neutral.

Mateo Brennan

Our favourite tips for busy weeks

just now

We work directly with makers, so prices stay fair for everyone.

Arjun Silva

<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">What to pack for a rainy weekend outdoors</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">Free shipping on orders over $50 and easy returns within 30 days.</p>
  <small class="">Ruby Moreau</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Styling one piece three different ways</h6>
    <small>3 days ago</small>
  </div>
  <p class="mb-1 small">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
  <small class="text-muted">Mateo Brennan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Our favourite tips for busy weeks</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">We work directly with makers, so prices stay fair for everyone.</p>
  <small class="text-muted">Arjun Silva</small></a>
</div>

10Checkbox list

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

Bright team smart
Calm journey secure
Friendly project calm
Simple experience fast

<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">Bright team smart</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">Calm journey secure</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">Friendly project calm</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">Simple experience fast</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

Thousands of five-star reviews from customers who came back for more.

Two-step verification is on.

Each product is checked by hand before it goes into the box.

<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">Thousands of five-star reviews from customers who came back for more.</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-fill" 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">Each product is checked by hand before it goes into the box.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Luna Kowalski4 days ago

Start in minutes and get help from a real person whenever you need it.

Lucas Patel12 hours ago

New pieces arrive every month, and the best ones sell out fast.

Noah Tanakayesterday

Clear prices, honest advice and no surprises along the way.

<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-5.svg" alt="Luna Kowalski" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Luna Kowalski</strong><small class="text-muted whitespace-nowrap ms-2">4 days ago</small>
    </div>
    <div class="small text-muted">
      Start in minutes and get help from a real person whenever you need it.
    </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-8.svg" alt="Lucas Patel" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Lucas Patel</strong><small class="text-muted whitespace-nowrap ms-2">12 hours ago</small>
    </div>
    <div class="small text-muted">
      New pieces arrive every month, and the best ones sell out fast.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-11.svg" alt="Noah Tanaka" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Noah Tanaka</strong><small class="text-muted whitespace-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-muted">
      Clear prices, honest advice and no surprises along the way.
    </div>
  </div>
  </a>
</div>

14File list

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

inside-our-new-autumn-collection.pdf
678 KB · Feb 10, 2026
what-our-shoppers-asked-us-most.png
677 KB · Sep 15, 2025
five-pieces-for-a-capsule-wardrobe.xlsx
654 KB · Feb 12, 2026
looking-back-at-a-busy-season.zip
90 KB · Jan 22, 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-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">inside-our-new-autumn-collection.pdf</div><div class="small text-muted">678 KB &middot; Feb 10, 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-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">what-our-shoppers-asked-us-most.png</div><div class="small text-muted">677 KB &middot; Sep 15, 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-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">five-pieces-for-a-capsule-wardrobe.xlsx</div><div class="small text-muted">654 KB &middot; Feb 12, 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-emphasis"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">looking-back-at-a-busy-season.zip</div><div class="small text-muted">90 KB &middot; Jan 22, 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.

Elena Fischer
Frontend Engineer
Zoe Hughes
Product Designer
Ivy Duarte
Art Director

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-7.svg" alt="Elena Fischer" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Elena Fischer</div><div class="small text-muted">Frontend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Elena"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" 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="Zoe Hughes" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Zoe Hughes</div><div class="small text-muted">Product Designer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Zoe"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" aria-hidden="true"></i></button></div></li>
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-5.svg" alt="Ivy Duarte" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Ivy Duarte</div><div class="small text-muted">Art Director</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ivy"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" 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-fill" 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-fill" 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-fill" 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.

Elegant launch100%
Simple update20%
Powerful dashboard38%

<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">Elegant launch</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">Simple update</span><span class="text-muted">20%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 20%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Powerful dashboard</span><span class="text-muted">38%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 38%;"></div></div></li>
</ul>

18Inbox list

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

Ravi Quinn15:45

The small habits that make a big difference

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

Ava Nguyen14:45

How we choose sustainable materials

Pay securely with card, wallet or in three interest-free instalments.

Samir Morgan15:00

How to care for linen so it lasts for years

Gift wrapping and a handwritten note are free on every order.

Mason Sato14:30

Five pieces for a capsule wardrobe

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

<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">Ravi Quinn</span><small class="text-muted ms-2 whitespace-nowrap">15:45</small>
    </div>
    <div class="small truncate font-semibold">
      The small habits that make a big difference
    </div>
    <div class="small text-muted truncate">
      Friendly people answer your questions quickly, by phone, chat or email.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Ava Nguyen</span><small class="text-muted ms-2 whitespace-nowrap">14:45</small>
    </div>
    <div class="small truncate font-semibold">
      How we choose sustainable materials
    </div>
    <div class="small text-muted truncate">
      Pay securely with card, wallet or in three interest-free instalments.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Samir Morgan</span><small class="text-muted ms-2 whitespace-nowrap">15:00</small>
    </div>
    <div class="small truncate text-muted">
      How to care for linen so it lasts for years
    </div>
    <div class="small text-muted truncate">
      Gift wrapping and a handwritten note are free on every order.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Mason Sato</span><small class="text-muted ms-2 whitespace-nowrap">14:30</small>
    </div>
    <div class="small truncate text-muted">
      Five pieces for a capsule wardrobe
    </div>
    <div class="small text-muted truncate">
      We measure success by how many shoppers come back and tell their friends.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Hana Carter832 pts
2Ethan Ashford672 pts
3Priya Whitaker466 pts
4Jonah Varga260 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-7.svg" alt="Hana Carter" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Hana Carter</span><span class="small">832 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-7.svg" alt="Ethan Ashford" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ethan Ashford</span><span class="small">672 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-4.svg" alt="Priya Whitaker" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Priya Whitaker</span><span class="small">466 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-1.svg" alt="Jonah Varga" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Jonah Varga</span><span class="small">260 pts</span></li>
</ol>

20Reorderable list look

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

Member prices1
Hand-checked quality2
Sustainable materials3
Secure payments4

<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">Member prices</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">Hand-checked quality</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">Sustainable materials</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 payments</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>