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="https://images.unsplash.com/photo-1557660559-42497f78035b?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Disaster response">
<div class="card-body">
<h5 class="card-title">Animal rescue</h5>
<p class="card-text">Leave a gift in your will and help future generations.</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
The small habits that make a big difference
We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.
<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">The small habits that make a big difference</h5>
<p class="card-text">We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
</div>
<div class="card-footer text-muted small">
Posted 55 min ago
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Transparent reports
- Secure giving
Most popular
Team
$29/mo
- Transparent reports
- Local partners
- Volunteer network
Business
$79/mo
- Impact tracking
- Local partners
- Local partners
- Tax receipts
<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-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Transparent reports</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Secure giving</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-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Transparent reports</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Local partners</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Volunteer network</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-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Impact tracking</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Local partners</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Local partners</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Tax receipts</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.
Noah Fischer
Finance Lead · Vancouver
263
Posts39.9k
Followers510
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="https://images.unsplash.com/photo-1758599668203-05ee0bca83ef?auto=format&fit=crop&w=1600&h=700&q=70" class="card-img-top object-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-6.svg" alt="Noah Fischer" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Noah Fischer</h5>
<p class="text-muted small">Finance Lead · Vancouver</p>
<div class="flex justify-around border-t border-b py-2 mb-4 small">
<div>
<div class="font-bold">
263
</div>
Posts
</div>
<div>
<div class="font-bold">
39.9k
</div>
Followers
</div>
<div>
<div class="font-bold">
510
</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.
Why monthly giving makes such a difference
Clear prices, honest advice and no surprises along the way.
Updated 59 min ago
<div class="card overflow-hidden" style="max-width: 560px;">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://images.unsplash.com/photo-1758599668360-48ba8ba71b47?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-full object-cover" alt="How your donations built three new classrooms">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Why monthly giving makes such a difference</h5>
<p class="card-text">Clear prices, honest advice and no surprises along the way.</p>
<p class="card-text"><small class="text-muted">Updated 59 min 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="https://images.unsplash.com/photo-1706806595136-5afefb45da1a?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img" alt="Change one life, change a community">
<div class="card-img-overlay flex flex-col justify-end ca-card-shade">
<span class="badge text-bg-light self-start mb-2">Animals</span>
<h4 class="card-title">Hope starts with you</h4>
<p class="card-text small mb-0">Sep 3, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$43,545.02
19% vs last month
New customers
2.6k
19% vs last month
Orders
7.2k
14% vs last month
Refund rate
2.0%
21% 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">
$43,545.02
</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-emphasis">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 19% 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">
2.6k
</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-emphasis">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 19% 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">
7.2k
</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-emphasis">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 14% 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.0%
</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-emphasis">
<i class="bi bi-arrow-down-right" aria-hidden="true"></i> 21% 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
- Shelter support213
- Clean water well88
- Emergency fund35
<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">Shelter support<span class="text-muted">213</span></li>
<li class="list-group-item flex justify-between">Clean water well<span class="text-muted">88</span></li>
<li class="list-group-item flex justify-between">Emergency fund<span class="text-muted">35</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.
Start in minutes and get help from a real person whenever you need it. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
- Volunteer network
- Tax receipts
“We measure success by how many donors come back and tell their friends.”
<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">Start in minutes and get help from a real person whenever you need it. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Volunteer network</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-emphasis" 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> “We measure success by how many donors come back and tell their friends.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
Clean water wells are built with and maintained by local communities.
Success
Every donation is tax-deductible, and receipts arrive by email instantly.
Danger
Our annual report is independently audited and published in full.
Warning
We keep things simple, so you can focus on what matters to you.
Info
A school kit costs less than a cinema ticket and lasts a whole year.
Dark
Every detail is handled by people who care about getting it right.
<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">Clean water wells are built with and maintained by local communities.</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">Every donation is tax-deductible, and receipts arrive by email instantly.</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 annual report is independently audited and published in full.</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">We keep things simple, so you can focus on what matters to you.</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 school kit costs less than a cinema ticket and lasts a whole year.</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">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Local partners know their communities and make sure help arrives where it matters.
Success border
Volunteers give their time in schools, shelters and food banks every week.
Danger border
We have helped more than two hundred thousand people since we started.
<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-ink font-semibold">
Primary border
</div>
<div class="card-body">
<p class="card-text small mb-0">Local partners know their communities and make sure help arrives where it matters.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-success h-full">
<div class="card-header bg-transparent border-success text-success-emphasis font-semibold">
Success border
</div>
<div class="card-body">
<p class="card-text small mb-0">Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-danger h-full">
<div class="card-header bg-transparent border-danger text-danger-emphasis font-semibold">
Danger border
</div>
<div class="card-body">
<p class="card-text small mb-0">We have helped more than two hundred thousand people since we started.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-38%Relief
Monthly gift
(947)
$23.99
Health
Clean water well
(256)
$470.00
Environment
Tree planting
(86)
$9.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="Monthly gift"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-38%</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">
Relief
</div>
<h6 class="card-title">Monthly gift</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" 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> <span class="text-muted">(947)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$23.99</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-7.svg" class="card-img-top" alt="Clean water well">
<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">Clean water well</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" aria-label="Rated 4.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" aria-hidden="true"></i></span> <span class="text-muted">(256)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$470.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 class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-4.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">
Environment
</div>
<h6 class="card-title">Tree planting</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" aria-label="Rated 3.9 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">(86)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$9.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.
Ava Quinn
Nov 22, 2025 · 7 min read
<div class="card h-full" style="max-width: 22rem;">
<img src="https://images.unsplash.com/photo-1778864875166-92a5c1adf24a?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="The small habits that make a big difference">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">guide</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">What happens after a disaster appeal</a></h5>
<p class="card-text text-muted">Leave a gift in your will and help future generations.</p>
</div>
<div class="card-footer bg-transparent flex items-center gap-2">
<img src="../assets/img/avatar-6.svg" alt="Ava Quinn" class="rounded-full shrink-0" width="32" height="32">
<div class="small">
<div class="font-semibold">
Ava Quinn
</div>
<div class="text-muted">
Nov 22, 2025 · 7 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Focused goal
Ninety cents of every dollar goes directly to the projects you support.
Focused process
You receive photos and updates showing exactly what your donation achieved.
Clear dashboard
We listen first, then build a plan around what you actually need.
<div class="card-group">
<div class="card">
<img src="https://images.unsplash.com/photo-1758599668360-48ba8ba71b47?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 1">
<div class="card-body">
<h5 class="card-title">Focused goal</h5>
<p class="card-text small">Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div class="card-footer">
<small class="text-muted">47 min ago</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1706806594967-44e2b31f01d0?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 2">
<div class="card-body">
<h5 class="card-title">Focused process</h5>
<p class="card-text small">You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div class="card-footer">
<small class="text-muted">just now</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1758599668178-d9716bbda9d5?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 3">
<div class="card-body">
<h5 class="card-title">Clear dashboard</h5>
<p class="card-text small">We listen first, then build a plan around what you actually need.</p>
</div>
<div class="card-footer">
<small class="text-muted">4 days ago</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Focused community
Thousands of donors already trust us, and we work hard to keep it that way.
Friendly launch
Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact.
Powerful dashboard
Every donation is tax-deductible, and receipts arrive by email instantly.
Elegant community
We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.
<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="https://images.unsplash.com/photo-1758599668178-d9716bbda9d5?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 1">
<div class="card-body">
<h6 class="card-title">Focused community</h6>
<p class="card-text small text-muted mb-0">Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1758599668356-c8c919e24dda?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 2">
<div class="card-body">
<h6 class="card-title">Friendly launch</h6>
<p class="card-text small text-muted mb-0">Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1557660559-42497f78035b?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 3">
<div class="card-body">
<h6 class="card-title">Powerful dashboard</h6>
<p class="card-text small text-muted mb-0">Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1560220604-1985ebfe28b1?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 4">
<div class="card-body">
<h6 class="card-title">Elegant community</h6>
<p class="card-text small text-muted mb-0">We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
Local partners know their communities and make sure help arrives where it matters. We measure success by how many donors come back and tell their friends.
Leo Kowalski
Operations Manager
<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-ink">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-4"><p class="text-base">Local partners know their communities and make sure help arrives where it matters. We measure success by how many donors come back and tell their friends.</p></blockquote>
<div class="mb-4">
<span class="text-warning-emphasis" 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-1.svg" alt="Leo Kowalski" class="rounded-full shrink-0" width="44" height="44">
<div>
<div class="font-semibold">
Leo Kowalski
</div>
<div class="small text-muted">
Operations Manager
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Priya Harlow placed a new order
1 days ago
Ivy Varga left a comment
just now
Nora Ashford joined the team
3 days ago
<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>Priya Harlow</strong> placed a new order
<div class="text-muted">
1 days ago
</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>Ivy Varga</strong> left a comment
<div class="text-muted">
just now
</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>Nora Ashford</strong> joined the team
<div class="text-muted">
3 days ago
</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 Glowia newsletter
One email a month. Our team has done this many times, so you never have to guess.
<div class="card text-center" style="max-width: 26rem;">
<div class="card-body p-6">
<div class="text-3xl text-primary-ink">
<i class="bi bi-envelope-paper" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Glowia newsletter</h5>
<p class="card-text text-muted small">One email a month. Our team has done this many times, so you never have to guess.</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">Tax receipts</a></h5>
<p class="card-text small text-muted mb-0">Volunteers give their time in schools, shelters and food banks every week.</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">Transparent reports</a></h5>
<p class="card-text small text-muted mb-0">We keep things simple, so you can focus on what matters to you.</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">Tax receipts</a></h5>
<p class="card-text small text-muted mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>