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.

UX research
Web design
Brand identity
Campaign production

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">UX research</li>
  <li class="list-group-item">Web design</li>
  <li class="list-group-item">Brand identity</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
Weekly demos
Fast turnaround

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

5Numbered list

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

Launch notes for clients
Feb 12, 2026
3
Clear ways to improve your goal
May 17, 2026
3
5 lessons from our update
Dec 25, 2025
13

<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">Launch notes for clients</div><span class="small text-muted">Feb 12, 2026</span></div><span class="badge text-bg-primary rounded-full">3</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Clear ways to improve your goal</div><span class="small text-muted">May 17, 2026</span></div><span class="badge text-bg-primary rounded-full">3</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">5 lessons from our update</div><span class="small text-muted">Dec 25, 2025</span></div><span class="badge text-bg-primary rounded-full">13</span></li>
</ol>

6Horizontal list

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

36.3k
Visitors
215
Sign-ups
41%
Conversion

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

Projects25
Tasks52
Issues1

<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">25</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">52</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">1</span></li>
</ul>

9Custom content

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

5 lessons from our goal

15 min ago

This practical team brings every detail in view for teams of every size.

Mia Morgan

What's new in web

yesterday

A clear plan helps the whole team on the same page all year round.

Elena Kim

How we rebuilt our journey

1 days ago

This focused idea turns new ideas to life from the very first day.

Owen Novak

<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">5 lessons from our goal</h6>
    <small>15 min ago</small>
  </div>
  <p class="mb-1 small">This practical team brings every detail in view for teams of every size.</p>
  <small class="">Mia Morgan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">What&#39;s new in web</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">A clear plan helps the whole team on the same page all year round.</p>
  <small class="text-muted">Elena Kim</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">How we rebuilt our journey</h6>
    <small>1 days ago</small>
  </div>
  <p class="mb-1 small">This focused idea turns new ideas to life from the very first day.</p>
  <small class="text-muted">Owen Novak</small></a>
</div>

10Checkbox list

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

Reliable update simple
Modern process bright
Elegant process secure
Clear plan 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">Reliable update simple</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 bright</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 process secure</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">Clear plan 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

Our campaign production brings time back in your day at a fair price.

Two-step verification is on.

The new weekly demos makes projects moving forward 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">Our campaign production brings time back in your day at a fair price.</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">The new weekly demos makes projects moving forward in just a few clicks.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Arjun Mensahyesterday

This simple experience guides complex tasks into simple steps in just a few clicks.

Maya Larsen3 days ago

Our motion graphics guides the whole team on the same page from the very first day.

Samir Moreau16 hours ago

Our content strategy gives complex tasks into simple steps 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-4.svg" alt="Arjun Mensah" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Arjun Mensah</strong><small class="text-muted whitespace-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-muted">
      This simple experience guides complex tasks into simple steps in just a few clicks.
    </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-1.svg" alt="Maya Larsen" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Maya Larsen</strong><small class="text-muted whitespace-nowrap ms-2">3 days ago</small>
    </div>
    <div class="small text-muted">
      Our motion graphics guides the whole team on the same page from the very first day.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-4.svg" alt="Samir Moreau" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Samir Moreau</strong><small class="text-muted whitespace-nowrap ms-2">16 hours ago</small>
    </div>
    <div class="small text-muted">
      Our content strategy gives complex tasks into simple steps at a fair price.
    </div>
  </div>
  </a>
</div>

14File list

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

the-elegant-routine-checklist.pdf
301 KB · Jun 24, 2026
the-bright-routine-checklist.png
668 KB · Sep 22, 2026
idea-notes-for-clients.xlsx
646 KB · Dec 16, 2025
how-we-rebuilt-our-routine.zip
649 KB · Dec 10, 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-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">the-elegant-routine-checklist.pdf</div><div class="small text-muted">301 KB &middot; Jun 24, 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-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">the-bright-routine-checklist.png</div><div class="small text-muted">668 KB &middot; Sep 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>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-primary"><i class="bi bi-file-earmark-spreadsheet-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">idea-notes-for-clients.xlsx</div><div class="small text-muted">646 KB &middot; Dec 16, 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"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">how-we-rebuilt-our-routine.zip</div><div class="small text-muted">649 KB &middot; Dec 10, 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.

Kenji Novak
Art Director
Zoe Mensah
Product Designer
Noah Brennan
Data Analyst

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-9.svg" alt="Kenji Novak" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Kenji Novak</div><div class="small text-muted">Art Director</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Kenji"><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="Zoe Mensah" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Zoe Mensah</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-11.svg" alt="Noah Brennan" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Noah Brennan</div><div class="small text-muted">Data Analyst</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Noah"><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"><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"><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"><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.

Practical idea100%
Secure workflow77%
Elegant process62%

<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">Practical idea</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 workflow</span><span class="text-muted">77%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 77%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Elegant process</span><span class="text-muted">62%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 62%;"></div></div></li>
</ul>

18Inbox list

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

Jonah Delgado14:15

Inside the reliable plan

Our campaign production makes new ideas to life from the very first day.

Freya Fischer17:00

How we rebuilt our experience

This simple update lets customers coming back from the very first day.

Nora Sato10:00

Practical ways to improve your dashboard

A honest idea keeps decisions quicker and clearer from the very first day.

Kai Harlow10:45

Experience notes for clients

This reliable community brings your work organised in just a few clicks.

<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">Jonah Delgado</span><small class="text-muted ms-2 whitespace-nowrap">14:15</small>
    </div>
    <div class="small truncate font-semibold">
      Inside the reliable plan
    </div>
    <div class="small text-muted truncate">
      Our campaign production makes new ideas to life from the very first day.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Freya Fischer</span><small class="text-muted ms-2 whitespace-nowrap">17:00</small>
    </div>
    <div class="small truncate font-semibold">
      How we rebuilt our experience
    </div>
    <div class="small text-muted truncate">
      This simple update lets customers coming back from the very first day.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Nora Sato</span><small class="text-muted ms-2 whitespace-nowrap">10:00</small>
    </div>
    <div class="small truncate text-muted">
      Practical ways to improve your dashboard
    </div>
    <div class="small text-muted truncate">
      A honest idea keeps decisions quicker and clearer from the very first day.
    </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-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Kai Harlow</span><small class="text-muted ms-2 whitespace-nowrap">10:45</small>
    </div>
    <div class="small truncate text-muted">
      Experience notes for clients
    </div>
    <div class="small text-muted truncate">
      This reliable community brings your work organised in just a few clicks.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Hana Larsen908 pts
2Elena Tanaka708 pts
3Ella Quinn566 pts
4Mateo Kowalski295 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-6.svg" alt="Hana Larsen" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Hana Larsen</span><span class="small">908 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-8.svg" alt="Elena Tanaka" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Elena Tanaka</span><span class="small">708 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="Ella Quinn" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ella Quinn</span><span class="small">566 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="Mateo Kowalski" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Mateo Kowalski</span><span class="small">295 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
Fixed-price projects2
Senior designers only3
Award-winning team4

<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">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-muted/70 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">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">Senior designers only</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">Award-winning team</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>