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="Multi-currency wallets">
<div class="card-body">
<h5 class="card-title">Business accounts</h5>
<p class="card-text">A clear story turns the whole team on the same page at a fair price.</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
What's new in payments
A practical workflow lets new ideas to life with friendly support. The new bank-grade encryption turns results you can measure in just a few clicks.
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-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">What's new in payments</h5>
<p class="card-text">A practical workflow lets new ideas to life with friendly support. The new bank-grade encryption turns results you can measure in just a few clicks.</p>
</div>
<div class="card-footer text-body-secondary small">
Posted 2 min ago
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Spending limits
- No hidden fees
Most popular
Team
$29/mo
- Bank-grade encryption
- Instant notifications
- 24/7 support
Business
$79/mo
- Accounting sync
- 24/7 support
- Accounting sync
- 24/7 support
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col">
<div class="card h-100 ">
<div class="card-header">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Starter</h5>
<div class="display-6 fw-bold my-2">
$9<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Spending limits</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> No hidden fees</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-100">Choose Starter</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 border-primary shadow">
<div class="card-header text-bg-primary">
Most popular
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Team</h5>
<div class="display-6 fw-bold my-2">
$29<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Bank-grade encryption</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Instant notifications</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 support</li>
</ul>
<button type="button" class="btn btn-primary mt-auto w-100">Choose Team</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ">
<div class="card-header">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Business</h5>
<div class="display-6 fw-bold my-2">
$79<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Accounting sync</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 support</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Accounting sync</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 support</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-100">Choose Business</button>
</div>
</div>
</div>
</div>4Profile card
Cover image, overlapping avatar, stats and actions for a user profile.
Mateo Kowalski
Data Analyst · Toronto
277
Posts2.6k
Followers171
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="../assets/img/wide-2.svg" class="card-img-top object-fit-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-11.svg" alt="Mateo Kowalski" class="rounded-circle border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Mateo Kowalski</h5>
<p class="text-body-secondary small">Data Analyst · Toronto</p>
<div class="d-flex justify-content-around border-top border-bottom py-2 mb-3 small">
<div>
<div class="fw-bold">
277
</div>
Posts
</div>
<div>
<div class="fw-bold">
2.6k
</div>
Followers
</div>
<div>
<div class="fw-bold">
171
</div>
Following
</div>
</div>
<div class="d-flex gap-2 justify-content-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.
How we rebuilt our goal
Our multi-currency wallets turns your work organised at a fair price.
Updated yesterday
<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-100 object-fit-cover" alt="Workflow notes for members">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">How we rebuilt our goal</h5>
<p class="card-text">Our multi-currency wallets turns your work organised at a fair price.</p>
<p class="card-text"><small class="text-body-secondary">Updated yesterday</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="Money management made simple">
<div class="card-img-overlay d-flex flex-column justify-content-end ca-card-shade">
<span class="badge text-bg-light align-self-start mb-2">Invoices</span>
<h4 class="card-title">Smarter payments for growing companies</h4>
<p class="card-text small mb-0">Sep 11, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$87,952.99
5% vs last month
New customers
7.3k
7% vs last month
Orders
8.9k
15% vs last month
Refund rate
3.1%
22% 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-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Revenue
</div>
<div class="fs-4 fw-bold">
$87,952.99
</div>
</div>
<span class="rounded-3 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> 5% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
New customers
</div>
<div class="fs-4 fw-bold">
7.3k
</div>
</div>
<span class="rounded-3 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> 7% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Orders
</div>
<div class="fs-4 fw-bold">
8.9k
</div>
</div>
<span class="rounded-3 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> 15% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Refund rate
</div>
<div class="fs-4 fw-bold">
3.1%
</div>
</div>
<span class="rounded-3 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> 22% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top accounts
- Savings vault703
- FX transfer71
- FX transfer33
<div class="card" style="max-width: 22rem;">
<div class="card-header fw-semibold">
Top accounts
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Savings vault<span class="text-body-secondary">703</span></li>
<li class="list-group-item d-flex justify-content-between">FX transfer<span class="text-body-secondary">71</span></li>
<li class="list-group-item d-flex justify-content-between">FX transfer<span class="text-body-secondary">33</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.
Our business accounts turns customers coming back without extra tools. The new 24/7 support connects customers coming back all year round.
- Bank-grade encryption
- Bank-grade encryption
“The new no hidden fees turns the whole team on the same page wherever you are.”
<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">Our business accounts turns customers coming back without extra tools. The new 24/7 support connects customers coming back all year round.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Bank-grade encryption</li>
<li>Bank-grade encryption</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> “The new no hidden fees turns the whole team on the same page wherever you are.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
A simple community makes time back in your day in just a few clicks.
Success
Our payroll lets data easy to understand without the usual hassle.
Danger
Our business accounts shows projects moving forward with friendly support.
Warning
This modern launch makes customers coming back with friendly support.
Info
A simple journey connects data easy to understand without extra tools.
Dark
This fast journey gives complex tasks into simple steps from the very first day.
<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-100">
<div class="card-header">
Primary
</div>
<div class="card-body">
<p class="card-text small mb-0">A simple community makes time back in your day in just a few clicks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-success h-100">
<div class="card-header">
Success
</div>
<div class="card-body">
<p class="card-text small mb-0">Our payroll lets data easy to understand without the usual hassle.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger h-100">
<div class="card-header">
Danger
</div>
<div class="card-body">
<p class="card-text small mb-0">Our business accounts shows projects moving forward with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning h-100">
<div class="card-header">
Warning
</div>
<div class="card-body">
<p class="card-text small mb-0">This modern launch makes customers coming back with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-info h-100">
<div class="card-header">
Info
</div>
<div class="card-body">
<p class="card-text small mb-0">A simple journey connects data easy to understand without extra tools.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark h-100">
<div class="card-header">
Dark
</div>
<div class="card-body">
<p class="card-text small mb-0">This fast journey gives complex tasks into simple steps from the very first day.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Our invoicing makes the whole team on the same page on any device.
Success border
The new spending limits shows data easy to understand without the usual hassle.
Danger border
A secure plan shows data easy to understand 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 border-primary h-100">
<div class="card-header bg-transparent border-primary text-primary fw-semibold">
Primary border
</div>
<div class="card-body">
<p class="card-text small mb-0">Our invoicing makes the whole team on the same page on any device.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-success h-100">
<div class="card-header bg-transparent border-success text-success fw-semibold">
Success border
</div>
<div class="card-body">
<p class="card-text small mb-0">The new spending limits shows data easy to understand without the usual hassle.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-danger h-100">
<div class="card-header bg-transparent border-danger text-danger fw-semibold">
Danger border
</div>
<div class="card-body">
<p class="card-text small mb-0">A secure plan shows data easy to understand wherever you are.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-30%Invoices
Pro account
(503)
$274.00
Payments
Basic account
(798)
$66.50
Payments
Virtual card
(732)
$213.50
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card h-100">
<div class="position-relative">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Pro account"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">-30%</span>
<button type="button" class="btn btn-light btn-sm rounded-circle position-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 d-flex flex-column">
<div class="small text-body-secondary">
Invoices
</div>
<h6 class="card-title">Pro account</h6>
<div class="small mb-2">
<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> <span class="text-body-secondary">(503)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$274.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-100">
<div class="position-relative">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Basic account">
<button type="button" class="btn btn-light btn-sm rounded-circle position-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 d-flex flex-column">
<div class="small text-body-secondary">
Payments
</div>
<h6 class="card-title">Basic account</h6>
<div class="small mb-2">
<span class="text-warning" 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-body-secondary">(798)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$66.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-100">
<div class="position-relative">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Virtual card">
<button type="button" class="btn btn-light btn-sm rounded-circle position-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 d-flex flex-column">
<div class="small text-body-secondary">
Payments
</div>
<h6 class="card-title">Virtual card</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.6 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> <span class="text-body-secondary">(732)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$213.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>13Blog post card
Category, title, excerpt and an author footer with avatar.
Luna Whitaker
Dec 22, 2025 · 9 min read
<div class="card h-100" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="Inside the friendly project">
<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 text-decoration-none">What's new in cards</a></h5>
<p class="card-text text-body-secondary">Our payroll makes projects moving forward wherever you are.</p>
</div>
<div class="card-footer bg-transparent d-flex align-items-center gap-2">
<img src="../assets/img/avatar-2.svg" alt="Luna Whitaker" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="small">
<div class="fw-semibold">
Luna Whitaker
</div>
<div class="text-body-secondary">
Dec 22, 2025 · 9 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Friendly journey
This focused community keeps your work organised with friendly support.
Honest team
Our business accounts keeps time back in your day without extra tools.
Elegant experience
A powerful launch turns customers coming back at a fair price.
<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">Friendly journey</h5>
<p class="card-text small">This focused community keeps your work organised with friendly support.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">43 min 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">Honest team</h5>
<p class="card-text small">Our business accounts keeps time back in your day without extra tools.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">just now</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">Elegant experience</h5>
<p class="card-text small">A powerful launch turns customers coming back at a fair price.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">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.
Bright release
This reliable journey turns every detail in view with friendly support.
Fast project
A calm journey connects you focused on what matters without the usual hassle. A calm journey guides you focused on what matters without extra tools.
Elegant story
A calm release guides new ideas to life on any device.
Powerful story
A friendly update shows complex tasks into simple steps on any device. This bright story helps 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-100 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">Bright release</h6>
<p class="card-text small text-body-secondary mb-0">This reliable journey turns every detail in view with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 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">Fast project</h6>
<p class="card-text small text-body-secondary mb-0">A calm journey connects you focused on what matters without the usual hassle. A calm journey guides you focused on what matters without extra tools.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 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">Elegant story</h6>
<p class="card-text small text-body-secondary mb-0">A calm release guides new ideas to life on any device.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 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">Powerful story</h6>
<p class="card-text small text-body-secondary mb-0">A friendly update shows complex tasks into simple steps on any device. This bright story helps 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.
A powerful experience makes results you can measure without the usual hassle. The new no hidden fees keeps data easy to understand from the very first day.
Elena Silva
Art Director
<div class="card border-0 bg-body-tertiary" style="max-width: 30rem;">
<div class="card-body p-4">
<div class="fs-1 lh-1 text-primary">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-3"><p class="fs-6">A powerful experience makes results you can measure without the usual hassle. The new no hidden fees keeps data easy to understand from the very first day.</p></blockquote>
<div class="mb-3">
<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="d-flex align-items-center gap-3">
<img src="../assets/img/avatar-6.svg" alt="Elena Silva" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Elena Silva
</div>
<div class="small text-body-secondary">
Art Director
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Elena Harlow placed a new order
just now
Lea Nguyen left a comment
yesterday
Nadia Ortega joined the team
yesterday
<div class="card" style="max-width: 26rem;">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold">Recent activity</span><a href="#" class="small">See all</a>
</div>
<div class="card-body">
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-success-subtle text-success-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-cart-check" aria-hidden="true"></i></span>
<div class="small">
<strong>Elena Harlow</strong> placed a new order
<div class="text-body-secondary">
just now
</div>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
<strong>Lea Nguyen</strong> left a comment
<div class="text-body-secondary">
yesterday
</div>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-info-subtle text-info-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-person-plus" aria-hidden="true"></i></span>
<div class="small">
<strong>Nadia Ortega</strong> joined the team
<div class="text-body-secondary">
yesterday
</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-body-secondary" 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 2 newsletter
One email a month. Our payroll lets results you can measure on any device.
<div class="card text-center" style="max-width: 26rem;">
<div class="card-body p-4">
<div class="fs-2 text-primary">
<i class="bi bi-envelope-paper" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Brand name 2 newsletter</h5>
<p class="card-text text-body-secondary small">One email a month. Our payroll lets results you can measure on any device.</p>
<form class="d-flex flex-column flex-sm-row gap-2">
<label class="visually-hidden" 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 text-nowrap">Subscribe</button>
</form>
</div>
</div>20Clickable feature cards
stretched-link makes the whole card clickable; a hover lift shows it.
No hidden fees
The new 24/7 support connects complex tasks into simple steps for teams of every size.
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 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 text-decoration-none">No hidden fees</a></h5>
<p class="card-text small text-body-secondary mb-0">The new 24/7 support connects complex tasks into simple steps for teams of every size.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 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 text-decoration-none">24/7 support</a></h5>
<p class="card-text small text-body-secondary mb-0">This bright community lets decisions quicker and clearer from the very first day.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 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 text-decoration-none">Spending limits</a></h5>
<p class="card-text small text-body-secondary mb-0">Our invoicing lets the whole team on the same page for teams of every size.</p>
</div>
</div>
</div>
</div>