Cards
Front's card provide a flexible and extensible content container with multiple variants and options.
Bootstrap Card documentationBasic example
Below is an example of a basic card with mixed content and a fixed width.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Titles, text, and links
Card titles are used by adding .card-title
to a <h*>
tag. In the same way, links are added and placed next to each other by adding .card-link
to an <a>
tag.
Subtitles are used by adding a .card-subtitle
to a <h*>
tag.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
<!-- Card -->
<div class="card" style="max-width: 20rem;">
<div class="card-body">
<span class="card-subtitle">Card subtitle</span>
<h3 class="card-title">Card title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link" href="#">Card link</a>
<a class="card-link" href="#">Another link</a>
</div>
</div>
<!-- End Card -->
Header
Add an optional header within a card. By default .card-header
is set to display: flex;
and justify-content: space-between;
and align-items: center;
.
Featured
2 days agoSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<!-- Card -->
<div class="card">
<div class="card-header">
<h3 class="card-header-title">Featured</h3>
<small class="text-muted">2 days ago</small>
</div>
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- End Card -->
Body
The building block of a card is the .card-body
. Use it whenever you need a padded section within a card.
<!-- Card -->
<div class="card">
<div class="card-body">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</div>
</div>
<!-- End Card -->
Footer
Add an optional footer within a card.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<!-- Card -->
<div class="card">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>
<!-- End Card -->
Card bordered
<!-- Card -->
<div class="card card-bordered">
<div class="card-body">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</div>
</div>
<!-- End Card -->
Sizing
Use .card-xs
class.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card card-xs" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Use .card-sm
class.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card card-sm" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Use .card-lg
class.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card card-lg" style="max-width: 20rem;">
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Images
Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<!-- Card -->
<div class="card mb-3">
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<!-- End Card -->
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card">
<img class="card-img card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
<!-- End Card -->
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters
and use .col-md-*
classes to make the card horizontal at the md
breakpoint. Further adjustments may be needed depending on your card content.
Card title
This is a wider card with supporting text below as a natural lead-in.
Last updated 3 mins ago
<!-- Card -->
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img class="img-fluid" src="../assets/img/documentation/img8.jpg" alt="Card image cap">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!-- End Card -->
Card layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Card groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex;
to become attached with uniform dimensions starting at the sm
breakpoint.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card group break
Use .card-group*{-sm|-md|-lg|-xl}
-break classes to change when their content vertically stacked.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-group card-group-sm-break">
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card group row
Use .card-group*{-sm|-md|-lg|-xl}-row
classes to change when their content as separate card grids. Resize me to md
resolution to see in action.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-group card-group-sm-break">
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card transition
Add animation on hover using .card-transition
<!-- Card -->
<a class="card card-transition" href="#">
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</a>
<!-- End Card -->
Card ghost
Need a card that has no box-shadow and border colors? Use .card-ghost
Billing address #1
45 Roker TerraceLatheronwheel
KW5 8NW, London
UK
Billing address #2
27 Thornton StHundleby
PE23 0ZJ, Manchester
UK
<div class="row">
<div class="col-md-4">
<!-- Card -->
<div class="card card-bordered h-100">
<div class="card-body">
<h3>Billing address #1</h3>
<address class="text-body">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</address>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-4">
<!-- Card -->
<div class="card card-bordered h-100">
<div class="card-body">
<h3>Billing address #2</h3>
<address class="text-body">
27 Thornton St<br>
Hundleby<br>
PE23 0ZJ, Manchester<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</address>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-4">
<!-- Card -->
<a class="card card-ghost card-centered h-100" href="#">
<div class="card-body">
<div class="mb-2">
<i class="bi-building fs-2"></i>
</div>
Add a new address
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Card dashed
Use .card-dashed
<!-- Card -->
<div class="card card-dashed shadow-none">
<div class="card-body text-center">
<div class="mb-2">
<i class="bi-building fs-2"></i>
</div>
This is a card with dashed border style
</div>
</div>
<!-- End Card -->
Card info link
Use .card-info-link
<!-- Card -->
<div class="card card-info-link card-sm">
<div class="card-body">
Need a card for a small info link? <a class="card-link ms-2" href="#">Use this option <span class="bi-chevron-right small ms-1"></span></a>
</div>
</div>
<!-- End Card -->
Card flush
Use .card-flush
to drop border
Announcing a free plan for small teams
At Wake, our mission has always been focused on bringing openness.
<!-- Card -->
<div class="card card-flush" style="max-width: 40rem;">
<div class="row align-items-center">
<div class="col-sm-5">
<img class="card-img" src="../assets/img/400x500/img5.jpg" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-sm-7">
<!-- Card Body -->
<div class="card-body">
<div class="mb-2">
<a class="card-link" href="#">Announcements</a>
</div>
<h3 class="card-title">
<a class="text-dark" href="../blog-article.html">Announcing a free plan for small teams</a>
</h3>
<p class="card-text">At Wake, our mission has always been focused on bringing openness.</p>
</div>
<!-- End Card Body -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
Card stretched vertical
Use .card-stretched-vertical
to align the footer at the bottom of a card. Note that .card-footer
must be placed in .card-body
Announcing a free plan for small teams
At Wake, our mission has always been focused on bringing openness.
Feb 4, 2021
<!-- Card -->
<div class="card card-flush card-stretched-vertical" style="max-width: 40rem;">
<div class="row">
<div class="col-sm-5">
<img class="card-img" src="../assets/img/400x500/img5.jpg" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-sm-7">
<!-- Card Body -->
<div class="card-body">
<div class="mb-2">
<a class="card-link" href="#">Announcements</a>
</div>
<h3 class="card-title">
<a class="text-dark" href="../blog-article.html">Announcing a free plan for small teams</a>
</h3>
<p class="card-text">At Wake, our mission has always been focused on bringing openness.</p>
<!-- Card Footer -->
<div class="card-footer">
<div class="d-flex">
<div class="flex-shrink-0">
<a class="avatar avatar-circle" href="../blog-profile.html">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</a>
</div>
<div class="flex-grow-1 ms-3">
<a class="card-link link-dark" href="../blog-profile.html">Hanna Wolfe</a>
<p class="card-text small">Feb 4, 2021</p>
</div>
</div>
</div>
<!-- End Card Footer -->
</div>
<!-- End Card Body -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
Card pinned
Need to place a component on top of a card image? Use .card-pinned-top-start
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
<span class="card-pinned-top-start">
<span class="badge bg-primary rounded-pill">Top start aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-top-end
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
<span class="card-pinned-top-end">
<span class="badge bg-primary rounded-pill">Top end aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-bottom-start
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-bottom" src="../assets/svg/components/card-7.svg" alt="Image Description">
<span class="card-pinned-bottom-start">
<span class="badge bg-primary rounded-pill">Top start aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
or .card-pinned-bottom-end
Objects and dimensions
Learn the simplest way to select the object and change dimensions.
<!-- Card -->
<div class="card h-100" style="max-width: 20rem;">
<div class="card-pinned">
<img class="card-img-bottom" src="../assets/svg/components/card-7.svg" alt="Image Description">
<span class="card-pinned-bottom-end">
<span class="badge bg-primary rounded-pill">Top end aligned</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
Alert
Use .card-alert
with alert
to remove the border-radius
and margin-bottom
to perfectly sit within a card body.
Featured
2 days agoCard title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<!-- Card -->
<div class="card">
<div class="card-header">
<h3 class="card-header-title">Featured</h3>
<small class="text-muted">2 days ago</small>
</div>
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- End Card -->
Table
.card-table
aligns table sizes with card body sizes.
Users
Name | Position | Country | Status |
---|---|---|---|
Amanda Harvey
amanda@example.com
|
Director Human resources | United Kingdom Code: GB | Active |
A
Anne Richard
anne@example.com
|
Seller Branding products | United States Code: US | Pending |
David Harrison
david@example.com
|
Unknown Unknown | United States Code: US | Active |
Finch Hoot
finch@example.com
|
Designer IT department | Argentina Code: AR | Suspended |
B
Bob Dean
bob@example.com
|
Executive director Marketing | Austria Code: AT | Active |
<!-- Card -->
<div class="card">
<div class="card-header">
<h4 class="card-header-title">Users</h4>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Name</th>
<th>Position</th>
<th>Country</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
<span class="d-block font-size-sm text-body">amanda@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Director</span>
<span class="d-block font-size-sm">Human resources</span>
</td>
<td>United Kingdom <span class="text-hide">Code: GB</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">A</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Anne Richard</span>
<span class="d-block font-size-sm text-body">anne@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Seller</span>
<span class="d-block font-size-sm">Branding products</span>
</td>
<td>United States <span class="text-hide">Code: US</span></td>
<td>
<span class="legend-indicator bg-warning"></span>Pending
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">David Harrison</span>
<span class="d-block font-size-sm text-body">david@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Unknown</span>
<span class="d-block font-size-sm">Unknown</span>
</td>
<td>United States <span class="text-hide">Code: US</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Finch Hoot</span>
<span class="d-block font-size-sm text-body">finch@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Designer</span>
<span class="d-block font-size-sm">IT department</span>
</td>
<td>Argentina <span class="text-hide">Code: AR</span></td>
<td>
<span class="legend-indicator bg-danger"></span>Suspended
</td>
</tr>
<tr>
<td>
<a class="d-flex" href="../user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">B</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Bob Dean</span>
<span class="d-block font-size-sm text-body">bob@example.com</span>
</div>
</a>
</td>
<td>
<span class="d-block h5 mb-0">Executive director</span>
<span class="d-block font-size-sm">Marketing</span>
</td>
<td>Austria <span class="text-hide">Code: AT</span></td>
<td>
<span class="legend-indicator bg-success"></span>Active
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->