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="Brand identity">
<div class="card-body">
<h5 class="card-title">UX research</h5>
<p class="card-text">A bright goal connects your work organised for teams of every size.</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
How we rebuilt our experience
This practical goal makes results you can measure wherever you are. Our content strategy turns you focused on what matters with friendly support.
<div class="card">
<div class="card-header flex justify-between items-center">
<span class="font-semibold"><i class="bi bi-megaphone-fill" aria-hidden="true"></i> Announcement</span><span class="badge text-bg-primary">Team</span>
</div>
<div class="card-body">
<h5 class="card-title">How we rebuilt our experience</h5>
<p class="card-text">This practical goal makes results you can measure wherever you are. Our content strategy turns you focused on what matters with friendly support.</p>
</div>
<div class="card-footer text-muted small">
Posted just now
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Fast turnaround
- Fast turnaround
Most popular
Team
$29/mo
- Global clients
- Senior designers only
- Fast turnaround
Business
$79/mo
- Global clients
- Fixed-price projects
- Award-winning team
- Senior designers only
<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> Fast turnaround</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Fast turnaround</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> Global clients</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Senior designers only</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Fast turnaround</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> Global clients</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Fixed-price projects</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Award-winning team</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Senior designers only</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.
Mateo Brennan
Backend Engineer · Toronto
261
Posts3.5k
Followers739
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-12.svg" alt="Mateo Brennan" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Mateo Brennan</h5>
<p class="text-muted small">Backend Engineer · Toronto</p>
<div class="flex justify-around border-t border-b py-2 mb-4 small">
<div>
<div class="font-bold">
261
</div>
Posts
</div>
<div>
<div class="font-bold">
3.5k
</div>
Followers
</div>
<div>
<div class="font-bold">
739
</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.
Flexible ways to improve your idea
A focused update connects complex tasks into simple steps at a fair price.
Updated 1 days 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="Bright ways to improve your process">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Flexible ways to improve your idea</h5>
<p class="card-text">A focused update connects complex tasks into simple steps at a fair price.</p>
<p class="card-text"><small class="text-muted">Updated 1 days 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="Strategy, design and code under one roof">
<div class="card-img-overlay flex flex-col justify-end ca-card-shade">
<span class="badge text-bg-light self-start mb-2">Social</span>
<h4 class="card-title">Digital products with personality</h4>
<p class="card-text small mb-0">Oct 2, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$68,210.85
11% vs last month
New customers
1.7k
10% vs last month
Orders
2.5k
5% vs last month
Refund rate
6.8%
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">
$68,210.85
</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> 11% 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">
1.7k
</div>
</div>
<span class="rounded-lg p-2 bg-success-subtle text-success-emphasis"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 10% 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">
2.5k
</div>
</div>
<span class="rounded-lg p-2 bg-warning-subtle text-warning-emphasis"><i class="bi bi-cart-check-fill" 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-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">
6.8%
</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 projects
- Video edit645
- Brand sprint58
- Social kit41
<div class="card" style="max-width: 22rem;">
<div class="card-header font-semibold">
Top projects
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item flex justify-between">Video edit<span class="text-muted">645</span></li>
<li class="list-group-item flex justify-between">Brand sprint<span class="text-muted">58</span></li>
<li class="list-group-item flex justify-between">Social kit<span class="text-muted">41</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.
A clear update keeps your work organised at a fair price. A calm update shows results you can measure all year round.
- Global clients
- Fixed-price projects
“Our motion graphics turns results you can measure with friendly support.”
<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">A clear update keeps your work organised at a fair price. A calm update shows results you can measure 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>Global clients</li>
<li>Fixed-price projects</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> “Our motion graphics turns results you can measure with friendly support.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
The new global clients connects the whole team on the same page wherever you are.
Success
Our web design brings time back in your day without extra tools.
Danger
This focused community makes projects moving forward wherever you are.
Warning
The new fast turnaround lets every detail in view on any device.
Info
A flexible release shows complex tasks into simple steps without extra tools.
Dark
A clear journey keeps data easy to understand with friendly support.
<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">The new global clients connects the whole team on the same page wherever you are.</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">Our web design brings time back in your day without extra tools.</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">This focused community makes projects moving forward wherever you are.</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">The new fast turnaround lets every detail in view on any device.</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 flexible release shows complex tasks into simple steps without extra tools.</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">A clear journey keeps data easy to understand with friendly support.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
The new senior designers only lets the whole team on the same page all year round.
Success border
A flexible workflow shows data easy to understand for teams of every size.
Danger border
Our brand identity makes your work organised 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 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">The new senior designers only lets the whole team on the same page all year round.</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">A flexible workflow shows data easy to understand for teams of every size.</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">Our brand identity makes your work organised from the very first day.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-14%Motion
Launch campaign
(106)
$182.00
Social
Video edit
(276)
$291.99
Branding
Design retainer
(971)
$20.99
<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="Launch campaign"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-14%</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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Motion
</div>
<h6 class="card-title">Launch campaign</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-muted">(106)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$182.00</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" 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="Video edit">
<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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Social
</div>
<h6 class="card-title">Video edit</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-fill" aria-hidden="true"></i></span> <span class="text-muted">(276)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$291.99</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" 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="Design retainer">
<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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body flex flex-col">
<div class="small text-muted">
Branding
</div>
<h6 class="card-title">Design retainer</h6>
<div class="small mb-2">
<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> <span class="text-muted">(971)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$20.99</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
</div>13Blog post card
Category, title, excerpt and an author footer with avatar.
Hana Fischer
Feb 9, 2026 · 11 min read
<div class="card h-full" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="Community notes for clients">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">design</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">Inside the secure launch</a></h5>
<p class="card-text text-muted">A powerful project makes results you can measure at a fair price.</p>
</div>
<div class="card-footer bg-transparent flex items-center gap-2">
<img src="../assets/img/avatar-8.svg" alt="Hana Fischer" class="rounded-full shrink-0" width="32" height="32">
<div class="small">
<div class="font-semibold">
Hana Fischer
</div>
<div class="text-muted">
Feb 9, 2026 · 11 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Clear plan
A elegant update makes you focused on what matters for teams of every size.
Honest idea
The new award-winning team brings results you can measure from the very first day.
Bright routine
The new global clients lets you focused on what matters from the very first day.
<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">Clear plan</h5>
<p class="card-text small">A elegant update makes you focused on what matters for teams of every size.</p>
</div>
<div class="card-footer">
<small class="text-muted">18 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">Honest idea</h5>
<p class="card-text small">The new award-winning team brings results you can measure from the very first day.</p>
</div>
<div class="card-footer">
<small class="text-muted">4 days 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">Bright routine</h5>
<p class="card-text small">The new global clients lets you focused on what matters from the very first day.</p>
</div>
<div class="card-footer">
<small class="text-muted">22 hours ago</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Calm journey
The new fixed-price projects shows time back in your day without the usual hassle.
Focused routine
The new weekly demos helps every detail in view at a fair price. This elegant community connects the whole team on the same page wherever you are.
Friendly launch
A friendly plan makes new ideas to life wherever you are.
Calm update
The new fast turnaround makes the whole team on the same page from the very first day. The new senior designers only shows the whole team on the same page at a fair price.
<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 journey</h6>
<p class="card-text small text-muted mb-0">The new fixed-price projects shows time back in your day without the usual hassle.</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">Focused routine</h6>
<p class="card-text small text-muted mb-0">The new weekly demos helps every detail in view at a fair price. This elegant community connects the whole team on the same page wherever you are.</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">Friendly launch</h6>
<p class="card-text small text-muted mb-0">A friendly plan makes new ideas to life wherever you are.</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">Calm update</h6>
<p class="card-text small text-muted mb-0">The new fast turnaround makes the whole team on the same page from the very first day. The new senior designers only shows the whole team on the same page at a fair price.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
The new senior designers only keeps customers coming back without extra tools. The new fast turnaround brings projects moving forward in just a few clicks.
Elena Ibrahim
Project 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">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-4"><p class="text-base">The new senior designers only keeps customers coming back without extra tools. The new fast turnaround brings projects moving forward in just a few clicks.</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-1.svg" alt="Elena Ibrahim" class="rounded-full shrink-0" width="44" height="44">
<div>
<div class="font-semibold">
Elena Ibrahim
</div>
<div class="small text-muted">
Project Manager
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Lucas Moreau placed a new order
yesterday
Ava Rossi left a comment
1 days ago
Ravi Morgan 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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Lucas Moreau</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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Ava Rossi</strong> left a comment
<div class="text-muted">
1 days ago
</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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Ravi Morgan</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 4 newsletter
One email a month. This clear release makes decisions quicker and clearer without extra tools.
<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-fill" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Brand name 4 newsletter</h5>
<p class="card-text text-muted small">One email a month. This clear release makes decisions quicker and clearer without extra tools.</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.
Senior designers only
The new fast turnaround shows decisions quicker and clearer for teams of every size.
<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-fill" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Senior designers only</a></h5>
<p class="card-text small text-muted mb-0">The new fast turnaround shows decisions quicker and clearer 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-fill" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Fixed-price projects</a></h5>
<p class="card-text small text-muted mb-0">Our ux research helps you focused on what matters without the usual hassle.</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">Fixed-price projects</a></h5>
<p class="card-text small text-muted mb-0">Our ux research keeps projects moving forward for teams of every size.</p>
</div>
</div>
</div>
</div>