Card
Cards are flexible content containers with optional header, footer, images and lists. Use them for products, profiles, pricing plans, dashboard widgets and articles, and lay them out with the grid, card groups or row-cols for equal heights.
1Basic card
Image on top, a title, some text and a button.
<div class="card" style="max-width: 20rem;">
<img src="../assets/img/photo-1.svg" class="card-img-top" alt="Volunteer programs">
<div class="card-body">
<h5 class="card-title">Education fund</h5>
<p class="card-text">This secure plan lets projects moving forward wherever you are.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>2Header and footer
card-header and card-footer frame the body; the footer often holds meta text.
AnnouncementTeam
A guide to food relief
A honest update turns every detail in view with friendly support. A focused experience connects the whole team on the same page in just a few clicks.
<div class="card">
<div class="card-header flex justify-between items-center">
<span class="font-semibold"><i class="bi bi-megaphone" aria-hidden="true"></i> Announcement</span><span class="badge text-bg-primary">Team</span>
</div>
<div class="card-body">
<h5 class="card-title">A guide to food relief</h5>
<p class="card-text">A honest update turns every detail in view with friendly support. A focused experience connects the whole team on the same page in just a few clicks.</p>
</div>
<div class="card-footer text-muted small">
Posted 5 min ago
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Volunteer network
- Volunteer network
Most popular
Team
$29/mo
- Impact tracking
- Tax receipts
- Tax receipts
Business
$79/mo
- Transparent reports
- Transparent reports
- Local partners
- Impact tracking
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col">
<div class="card h-full">
<div class="card-header">
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Starter</h5>
<div class="display-6 font-bold my-2">
$9<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Volunteer network</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Volunteer network</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-full">Choose Starter</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-full border-primary shadow-md">
<div class="card-header text-bg-primary">
Most popular
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Team</h5>
<div class="display-6 font-bold my-2">
$29<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Impact tracking</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Tax receipts</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Tax receipts</li>
</ul>
<button type="button" class="btn btn-primary mt-auto w-full">Choose Team</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-header">
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Business</h5>
<div class="display-6 font-bold my-2">
$79<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Transparent reports</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Transparent reports</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Local partners</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Impact tracking</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-full">Choose Business</button>
</div>
</div>
</div>
</div>4Profile card
Cover image, overlapping avatar, stats and actions for a user profile.
Elena Moreau
Finance Lead · Cape Town
77
Posts11.9k
Followers729
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="../assets/img/wide-2.svg" class="card-img-top object-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-8.svg" alt="Elena Moreau" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Elena Moreau</h5>
<p class="text-muted small">Finance Lead · Cape Town</p>
<div class="flex justify-around border-t border-b py-2 mb-4 small">
<div>
<div class="font-bold">
77
</div>
Posts
</div>
<div>
<div class="font-bold">
11.9k
</div>
Followers
</div>
<div>
<div class="font-bold">
729
</div>
Following
</div>
</div>
<div class="flex gap-2 justify-center">
<button type="button" class="btn btn-primary btn-sm">Follow</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Message</button>
</div>
</div>
</div>5Horizontal card
Image and text side by side using the grid; it stacks on small screens.
Friendly ways to improve your dashboard
Our volunteer programs guides projects moving forward in just a few clicks.
Updated 23 hours ago
<div class="card overflow-hidden" style="max-width: 560px;">
<div class="row g-0">
<div class="col-sm-4">
<img src="../assets/img/square-3.svg" class="img-fluid h-full object-cover" alt="How we rebuilt our update">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Friendly ways to improve your dashboard</h5>
<p class="card-text">Our volunteer programs guides projects moving forward in just a few clicks.</p>
<p class="card-text"><small class="text-muted">Updated 23 hours ago</small></p>
</div>
</div>
</div>
</div>6Image overlay
Text over the image with card-img-overlay and a dark gradient for contrast.
<div class="card text-white border-0 overflow-hidden" style="max-width: 32rem;">
<img src="../assets/img/photo-6.svg" class="card-img" alt="Together we can change lives">
<div class="card-img-overlay flex flex-col justify-end ca-card-shade">
<span class="badge text-bg-light self-start mb-2">Environment</span>
<h4 class="card-title">Small acts, big impact</h4>
<p class="card-text small mb-0">Jul 26, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$52,685.44
8% vs last month
New customers
4.7k
20% vs last month
Orders
8.1k
2% vs last month
Refund rate
2.9%
2% vs last month
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Revenue
</div>
<div class="text-xl font-bold">
$52,685.44
</div>
</div>
<span class="rounded-lg p-2 bg-primary-subtle text-primary-emphasis"><i class="bi bi-currency-dollar" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 8% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
New customers
</div>
<div class="text-xl font-bold">
4.7k
</div>
</div>
<span class="rounded-lg p-2 bg-success-subtle text-success-emphasis"><i class="bi bi-people" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 20% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Orders
</div>
<div class="text-xl font-bold">
8.1k
</div>
</div>
<span class="rounded-lg p-2 bg-warning-subtle text-warning-emphasis"><i class="bi bi-cart-check" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 2% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Refund rate
</div>
<div class="text-xl font-bold">
2.9%
</div>
</div>
<span class="rounded-lg p-2 bg-danger-subtle text-danger-emphasis"><i class="bi bi-graph-down-arrow" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-danger">
<i class="bi bi-arrow-down-right" aria-hidden="true"></i> 2% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top campaigns
- Meal pack512
- Tree planting71
- Shelter support49
<div class="card" style="max-width: 22rem;">
<div class="card-header font-semibold">
Top campaigns
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item flex justify-between">Meal pack<span class="text-muted">512</span></li>
<li class="list-group-item flex justify-between">Tree planting<span class="text-muted">71</span></li>
<li class="list-group-item flex justify-between">Shelter support<span class="text-muted">49</span></li>
</ul>
<div class="card-footer bg-transparent">
<a href="#" class="small">View all <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
</div>
</div>9Card with tabs
Nav tabs in the card header switch the body content through the tab data API.
The new impact tracking brings new ideas to life without the usual hassle. The new tax receipts turns new ideas to life without the usual hassle.
- Transparent reports
- Tax receipts
“This friendly workflow lets data easy to understand for teams of every size.”
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="ctab-877-tab" data-ui-toggle="tab" data-ui-target="#ctab-877" type="button" role="tab" aria-controls="ctab-877" aria-selected="true">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="ctab-878-tab" data-ui-toggle="tab" data-ui-target="#ctab-878" type="button" role="tab" aria-controls="ctab-878" aria-selected="false">Specs</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="ctab-879-tab" data-ui-toggle="tab" data-ui-target="#ctab-879" type="button" role="tab" aria-controls="ctab-879" aria-selected="false">Reviews</button></li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade show active" id="ctab-877" role="tabpanel" aria-labelledby="ctab-877-tab" tabindex="0">
<p class="mb-0">The new impact tracking brings new ideas to life without the usual hassle. The new tax receipts turns new ideas to life without the usual hassle.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Transparent reports</li>
<li>Tax receipts</li>
</ul>
</div>
<div class="tab-pane fade" id="ctab-879" role="tabpanel" aria-labelledby="ctab-879-tab" tabindex="0">
<p class="mb-0"><span class="text-warning" aria-label="Rated 4.5 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> “This friendly workflow lets data easy to understand for teams of every size.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
A elegant experience turns results you can measure all year round.
Success
The new volunteer network shows time back in your day at a fair price.
Danger
Our education fund turns the whole team on the same page for teams of every size.
Warning
A focused team guides complex tasks into simple steps with friendly support.
Info
A bright team lets data easy to understand in just a few clicks.
Dark
This simple story connects projects moving forward wherever you are.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card text-bg-primary h-full">
<div class="card-header">
Primary
</div>
<div class="card-body">
<p class="card-text small mb-0">A elegant experience turns results you can measure all year round.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-success h-full">
<div class="card-header">
Success
</div>
<div class="card-body">
<p class="card-text small mb-0">The new volunteer network shows time back in your day at a fair price.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger h-full">
<div class="card-header">
Danger
</div>
<div class="card-body">
<p class="card-text small mb-0">Our education fund turns the whole team on the same page for teams of every size.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning h-full">
<div class="card-header">
Warning
</div>
<div class="card-body">
<p class="card-text small mb-0">A focused team guides complex tasks into simple steps with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-info h-full">
<div class="card-header">
Info
</div>
<div class="card-body">
<p class="card-text small mb-0">A bright team lets data easy to understand in just a few clicks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark h-full">
<div class="card-header">
Dark
</div>
<div class="card-body">
<p class="card-text small mb-0">This simple story connects projects moving forward wherever you are.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Our volunteer programs gives new ideas to life in just a few clicks.
Success border
The new tax receipts brings the whole team on the same page wherever you are.
Danger border
The new transparent reports turns complex tasks into simple steps on any device.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card border-primary h-full">
<div class="card-header bg-transparent border-primary text-primary font-semibold">
Primary border
</div>
<div class="card-body">
<p class="card-text small mb-0">Our volunteer programs gives new ideas to life in just a few clicks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-success h-full">
<div class="card-header bg-transparent border-success text-success font-semibold">
Success border
</div>
<div class="card-body">
<p class="card-text small mb-0">The new tax receipts brings the whole team on the same page wherever you are.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-danger h-full">
<div class="card-header bg-transparent border-danger text-danger font-semibold">
Danger border
</div>
<div class="card-body">
<p class="card-text small mb-0">The new transparent reports turns complex tasks into simple steps on any device.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-25%Health
School kit
(821)
$73.50
Relief
Tree planting
(547)
$88.50
Relief
Meal pack
(463)
$354.00
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="School kit"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-25%</span>
<button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Health
</div>
<h6 class="card-title">School kit</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 3.5 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-muted">(821)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$73.50</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Tree planting">
<button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Relief
</div>
<h6 class="card-title">Tree planting</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.1 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-muted">(547)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$88.50</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Meal pack">
<button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Relief
</div>
<h6 class="card-title">Meal pack</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.2 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-muted">(463)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$354.00</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
</div>13Blog post card
Category, title, excerpt and an author footer with avatar.
Sofia Ortega
Sep 29, 2025 · 12 min read
<div class="card h-full" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="3 lessons from our routine">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">community</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">How we rebuilt our launch</a></h5>
<p class="card-text text-muted">Our animal rescue lets time back in your day wherever you are.</p>
</div>
<div class="card-footer bg-transparent flex items-center gap-2">
<img src="../assets/img/avatar-3.svg" alt="Sofia Ortega" class="rounded-full shrink-0" width="32" height="32">
<div class="small">
<div class="font-semibold">
Sofia Ortega
</div>
<div class="text-muted">
Sep 29, 2025 · 12 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Modern story
A bright release shows complex tasks into simple steps all year round.
Smart team
This smart team keeps time back in your day with friendly support.
Clear workflow
This friendly workflow guides your work organised wherever you are.
<div class="card-group">
<div class="card">
<img src="../assets/img/photo-9.svg" class="card-img-top" alt="Gallery image 1">
<div class="card-body">
<h5 class="card-title">Modern story</h5>
<p class="card-text small">A bright release shows complex tasks into simple steps all year round.</p>
</div>
<div class="card-footer">
<small class="text-muted">21 hours ago</small>
</div>
</div>
<div class="card">
<img src="../assets/img/photo-10.svg" class="card-img-top" alt="Gallery image 2">
<div class="card-body">
<h5 class="card-title">Smart team</h5>
<p class="card-text small">This smart team keeps time back in your day with friendly support.</p>
</div>
<div class="card-footer">
<small class="text-muted">23 hours ago</small>
</div>
</div>
<div class="card">
<img src="../assets/img/photo-11.svg" class="card-img-top" alt="Gallery image 3">
<div class="card-body">
<h5 class="card-title">Clear workflow</h5>
<p class="card-text small">This friendly workflow guides your work organised wherever you are.</p>
</div>
<div class="card-footer">
<small class="text-muted">just now</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Calm experience
This fast community shows time back in your day with friendly support.
Modern story
The new tax receipts connects data easy to understand on any device. This clear plan helps time back in your day at a fair price.
Honest dashboard
The new secure giving lets customers coming back all year round.
Practical routine
A clear team guides time back in your day all year round. A calm community keeps results you can measure on any device.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="../assets/img/square-5.svg" class="card-img-top" alt="Project 1">
<div class="card-body">
<h6 class="card-title">Calm experience</h6>
<p class="card-text small text-muted mb-0">This fast community shows time back in your day with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="../assets/img/square-6.svg" class="card-img-top" alt="Project 2">
<div class="card-body">
<h6 class="card-title">Modern story</h6>
<p class="card-text small text-muted mb-0">The new tax receipts connects data easy to understand on any device. This clear plan helps time back in your day at a fair price.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="../assets/img/square-7.svg" class="card-img-top" alt="Project 3">
<div class="card-body">
<h6 class="card-title">Honest dashboard</h6>
<p class="card-text small text-muted mb-0">The new secure giving lets customers coming back all year round.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="../assets/img/square-8.svg" class="card-img-top" alt="Project 4">
<div class="card-body">
<h6 class="card-title">Practical routine</h6>
<p class="card-text small text-muted mb-0">A clear team guides time back in your day all year round. A calm community keeps results you can measure on any device.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
This fast launch brings projects moving forward with friendly support. This calm experience guides new ideas to life all year round.
Chloe Varga
Finance Lead
<div class="card border-0 bg-surface-3" style="max-width: 30rem;">
<div class="card-body p-6">
<div class="text-4xl leading-none text-primary">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-4"><p class="text-base">This fast launch brings projects moving forward with friendly support. This calm experience guides new ideas to life all year round.</p></blockquote>
<div class="mb-4">
<span class="text-warning" aria-label="Rated 5.0 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span>
</div>
<div class="flex items-center gap-4">
<img src="../assets/img/avatar-4.svg" alt="Chloe Varga" class="rounded-full shrink-0" width="44" height="44">
<div>
<div class="font-semibold">
Chloe Varga
</div>
<div class="small text-muted">
Finance Lead
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Hana Sato placed a new order
yesterday
Mason Kim left a comment
yesterday
Leo Moreau joined the team
just now
<div class="card" style="max-width: 26rem;">
<div class="card-header flex justify-between items-center">
<span class="font-semibold">Recent activity</span><a href="#" class="small">See all</a>
</div>
<div class="card-body">
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-success-subtle text-success-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-cart-check" aria-hidden="true"></i></span>
<div class="small">
<strong>Hana Sato</strong> placed a new order
<div class="text-muted">
yesterday
</div>
</div>
</div>
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
<strong>Mason Kim</strong> left a comment
<div class="text-muted">
yesterday
</div>
</div>
</div>
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-info-subtle text-info-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-person-plus" aria-hidden="true"></i></span>
<div class="small">
<strong>Leo Moreau</strong> joined the team
<div class="text-muted">
just now
</div>
</div>
</div>
</div>
</div>18Loading placeholder
placeholder-glow shapes stand in for content while it loads.
<div class="card" aria-hidden="true" style="max-width: 20rem;">
<div class="bg-surface-2" style="height: 140px;">
</div>
<div class="card-body">
<h5 class="card-title placeholder-glow"><span class="placeholder col-6"></span></h5>
<p class="card-text placeholder-glow"><span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span></p>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>19Newsletter card
A card with a small form for collecting email sign-ups.
Get the Brand name 11 newsletter
One email a month. This clear community connects your work organised all year round.
<div class="card text-center" style="max-width: 26rem;">
<div class="card-body p-6">
<div class="text-3xl text-primary">
<i class="bi bi-envelope-paper" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Brand name 11 newsletter</h5>
<p class="card-text text-muted small">One email a month. This clear community connects your work organised all year round.</p>
<form class="flex flex-col sm:flex-row gap-2">
<label class="sr-only" for="news-email-880">Email address</label>
<input type="email" class="form-control" id="news-email-880" placeholder="you@example.com">
<button type="submit" class="btn btn-primary whitespace-nowrap">Subscribe</button>
</form>
</div>
</div>20Clickable feature cards
stretched-link makes the whole card clickable; a hover lift shows it.
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card h-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-lightning-charge" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Secure giving</a></h5>
<p class="card-text small text-muted mb-0">A elegant workflow shows the whole team on the same page for teams of every size.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-shield-lock" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Impact tracking</a></h5>
<p class="card-text small text-muted mb-0">Our food relief connects you focused on what matters all year round.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Transparent reports</a></h5>
<p class="card-text small text-muted mb-0">A reliable idea shows customers coming back without extra tools.</p>
</div>
</div>
</div>
</div>