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.

Motion graphics
Content strategy
UX research
Campaign production

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Motion graphics</li>
  <li class="list-group-item">Content strategy</li>
  <li class="list-group-item">UX research</li>
  <li class="list-group-item">Campaign production</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.

Global clients
Fixed-price projects
Weekly demos

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Global clients</li>
  <li class="list-group-item">Fixed-price projects</li>
  <li class="list-group-item">Weekly demos</li>
</ul>

5Numbered list

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

Inside our design process
Aug 5, 2026
21
Looking back at a busy season
Sep 18, 2025
30
A checklist for your next website launch
Jul 4, 2026
28

<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">Inside our design process</div><span class="small text-muted">Aug 5, 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">Looking back at a busy season</div><span class="small text-muted">Sep 18, 2025</span></div><span class="badge text-bg-primary rounded-full">30</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">A checklist for your next website launch</div><span class="small text-muted">Jul 4, 2026</span></div><span class="badge text-bg-primary rounded-full">28</span></li>
</ol>

6Horizontal list

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

2.7k
Visitors
752
Sign-ups
44%
Conversion

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

Projects11
Tasks44
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-fill" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-full">11</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">44</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">4</span></li>
</ul>

9Custom content

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

How we ran a rebrand in eight weeks

6 days ago

Every detail is handled by people who care about getting it right.

Luna Lindqvist

Five website mistakes that cost you leads

7 min ago

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

Isla Whitaker

What makes a brand memorable

yesterday

Our motion team turns complex ideas into short films people actually watch.

Ravi Okafor

<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 ran a rebrand in eight weeks</h6>
    <small>6 days ago</small>
  </div>
  <p class="mb-1 small">Every detail is handled by people who care about getting it right.</p>
  <small class="">Luna Lindqvist</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Five website mistakes that cost you leads</h6>
    <small>7 min ago</small>
  </div>
  <p class="mb-1 small">We measure success by how many clients come back and tell their friends.</p>
  <small class="text-muted">Isla Whitaker</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">What makes a brand memorable</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Our motion team turns complex ideas into short films people actually watch.</p>
  <small class="text-muted">Ravi Okafor</small></a>
</div>

10Checkbox list

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

Smart experience friendly
Fast workflow practical
Fast update friendly
Simple launch 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">Smart experience friendly</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">Fast workflow 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">Fast update friendly</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 launch 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

We measure success in sign-ups, sales and brand recall, not just awards.

Two-step verification is on.

We combine strategy, design and technology to build brands that grow.

<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 measure success in sign-ups, sales and brand recall, not just awards.</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">We combine strategy, design and technology to build brands that grow.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Ethan Ashfordyesterday

Our motion team turns complex ideas into short films people actually watch.

Mia Nguyenjust now

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

Omar Delgado2 days ago

We have helped more than a hundred companies launch, rebrand and grow online.

<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-1.svg" alt="Ethan Ashford" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Ethan Ashford</strong><small class="text-muted whitespace-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-muted">
      Our motion team turns complex ideas into short films people actually watch.
    </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="Mia Nguyen" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Mia Nguyen</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      Start in minutes and get help from a real person whenever you need it.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-3.svg" alt="Omar Delgado" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Omar Delgado</strong><small class="text-muted whitespace-nowrap ms-2">2 days ago</small>
    </div>
    <div class="small text-muted">
      We have helped more than a hundred companies launch, rebrand and grow online.
    </div>
  </div>
  </a>
</div>

14File list

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

how-to-choose-the-right-project.pdf
819 KB · Mar 12, 2026
five-things-we-learned-this-year.png
92 KB · Aug 5, 2026
what-our-clients-asked-us-most.xlsx
413 KB · Jul 6, 2026
choosing-colours-that-sell.zip
210 KB · Dec 29, 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-emphasis"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">how-to-choose-the-right-project.pdf</div><div class="small text-muted">819 KB &middot; Mar 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-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">five-things-we-learned-this-year.png</div><div class="small text-muted">92 KB &middot; Aug 5, 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-ink"><i class="bi bi-file-earmark-spreadsheet-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">what-our-clients-asked-us-most.xlsx</div><div class="small text-muted">413 KB &middot; Jul 6, 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">choosing-colours-that-sell.zip</div><div class="small text-muted">210 KB &middot; Dec 29, 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.

Amara Quinn
Data Analyst
Mateo Larsen
Marketing Lead
Hana Mensah
Product Designer

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-1.svg" alt="Amara Quinn" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Amara Quinn</div><div class="small text-muted">Data Analyst</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Amara"><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-9.svg" alt="Mateo Larsen" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Mateo Larsen</div><div class="small text-muted">Marketing Lead</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Mateo"><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-8.svg" alt="Hana Mensah" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Hana Mensah</div><div class="small text-muted">Product Designer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Hana"><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.

Honest project100%
Clear plan21%
Simple plan26%

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

18Inbox list

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

Leo Harlow17:45

What our clients asked us most

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

Tariq Hughes07:30

A beginner's guide to getting started

Every detail is handled by people who care about getting it right.

Jonah Fischer10:45

How to choose the right project

Websites we build are fast, accessible and easy for your team to update.

Finn Silva11:15

Why motion matters for modern brands

Senior designers lead every project from the first sketch to the final file.

<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">Leo Harlow</span><small class="text-muted ms-2 whitespace-nowrap">17:45</small>
    </div>
    <div class="small truncate font-semibold">
      What our clients asked us most
    </div>
    <div class="small text-muted truncate">
      We keep things simple, so you can focus on what matters to you.
    </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">Tariq Hughes</span><small class="text-muted ms-2 whitespace-nowrap">07:30</small>
    </div>
    <div class="small truncate font-semibold">
      A beginner&#39;s guide to getting started
    </div>
    <div class="small text-muted truncate">
      Every detail is handled by people who care about getting it right.
    </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="">Jonah Fischer</span><small class="text-muted ms-2 whitespace-nowrap">10:45</small>
    </div>
    <div class="small truncate text-muted">
      How to choose the right project
    </div>
    <div class="small text-muted truncate">
      Websites we build are fast, accessible and easy for your team to update.
    </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="">Finn Silva</span><small class="text-muted ms-2 whitespace-nowrap">11:15</small>
    </div>
    <div class="small truncate text-muted">
      Why motion matters for modern brands
    </div>
    <div class="small text-muted truncate">
      Senior designers lead every project from the first sketch to the final file.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ivy Patel1180 pts
2Lucas Alvarez882 pts
3Arjun Morgan486 pts
4Felix Ibrahim279 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="Ivy Patel" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ivy Patel</span><span class="small">1180 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-10.svg" alt="Lucas Alvarez" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Lucas Alvarez</span><span class="small">882 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-7.svg" alt="Arjun Morgan" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Arjun Morgan</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-2.svg" alt="Felix Ibrahim" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Felix Ibrahim</span><span class="small">279 pts</span></li>
</ol>

20Reorderable list look

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

Global clients1
Award-winning team2
Fixed-price projects3
Fast turnaround4

<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">Global clients</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">Award-winning team</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">Fixed-price projects</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">Fast turnaround</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>