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.

Single sign-on

Set up in an afternoon, connect the tools you use and invite your team.

Learn more

<div class="card" style="max-width: 20rem;">
  <img src="../assets/img/photo-1.svg" class="card-img-top" alt="Workflow automation">
  <div class="card-body">
    <h5 class="card-title">Single sign-on</h5>
    <p class="card-text">Set up in an afternoon, connect the tools you use and invite your team.</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

Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

Posted yesterday

<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">Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div class="card-footer text-muted small">
    Posted yesterday
  </div>
</div>

3Pricing cards

Three plans with equal heights; the recommended plan is highlighted.

Starter

$9/mo

Role-based access
99.99% uptime

Team

$29/mo

Dark mode
Dark mode
Audit trail

Business

$79/mo

Real-time collaboration
Role-based access
Audit trail
Open API

<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">
        &nbsp;
      </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> Role-based access</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> 99.99% uptime</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> Dark mode</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Dark mode</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Audit trail</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">
        &nbsp;
      </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> Real-time collaboration</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Role-based access</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Audit trail</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Open API</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 Lindqvist

Marketing Lead · Toronto

266

Posts

21.8k

Followers

462

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 Lindqvist" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
    <h5 class="card-title mt-2 mb-0">Mateo Lindqvist</h5>
    <p class="text-muted small">Marketing Lead &middot; Toronto</p>
    <div class="flex justify-around border-t border-b py-2 mb-4 small">
      <div>
        <div class="font-bold">
          266
        </div>
        Posts
      </div>
      <div>
        <div class="font-bold">
          21.8k
        </div>
        Followers
      </div>
      <div>
        <div class="font-bold">
          462
        </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.

What our customers asked us most

Clear reports turn weekly numbers into decisions in minutes, not days.

Updated yesterday

<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-1690264421892-46e3af5c3455?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-full object-cover" alt="A practical guide to async work">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">What our customers asked us most</h5>
        <p class="card-text">Clear reports turn weekly numbers into decisions in minutes, not days.</p>
        <p class="card-text"><small class="text-muted">Updated yesterday</small></p>
      </div>
    </div>
  </div>
</div>

6Image overlay

Text over the image with card-img-overlay and a dark gradient for contrast.

Sales

Fewer meetings, more finished work

Dec 9, 2025

<div class="card text-white border-0 overflow-hidden" style="max-width: 32rem;">
  <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img" alt="Your whole team, finally in sync">
  <div class="card-img-overlay flex flex-col justify-end ca-card-shade">
    <span class="badge text-bg-light self-start mb-2">Sales</span>
    <h4 class="card-title">Fewer meetings, more finished work</h4>
    <p class="card-text small mb-0">Dec 9, 2025</p>
  </div>
</div>

7KPI cards

Small stat cards for dashboards: value, trend and a tinted icon.

Revenue

$40,188.50

20% vs last month

New customers

2.5k

20% vs last month

Orders

5.7k

18% vs last month

Refund rate

3.6%

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">
              $40,188.50
            </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> 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">
              New customers
            </div>
            <div class="text-xl font-bold">
              2.5k
            </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> 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">
              5.7k
            </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> 18% 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">
              3.6%
            </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> 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 plans

API boost300
Enterprise suite54
Onboarding workshop16

View all

<div class="card" style="max-width: 22rem;">
  <div class="card-header font-semibold">
    Top plans
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item flex justify-between">API boost<span class="text-muted">300</span></li>
    <li class="list-group-item flex justify-between">Enterprise suite<span class="text-muted">54</span></li>
    <li class="list-group-item flex justify-between">Onboarding workshop<span class="text-muted">16</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.

Plan projects, track progress and share updates without another status meeting. We listen first, then build a plan around what you actually need.

Role-based access
Role-based access

“We measure success by how many customers 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">Plan projects, track progress and share updates without another status meeting. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
      <ul class="mb-0">
        <li>Role-based access</li>
        <li>Role-based access</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> &ldquo;We measure success by how many customers come back and tell their friends.&rdquo;</p>
    </div>
  </div>
</div>

10Background colours

text-bg-* colours the whole card with matching readable text.

Primary

Onboarding guides and live chat help new colleagues get going on day one.

Success

Real-time dashboards show what is on track and what needs attention.

Danger

We keep things simple, so you can focus on what matters to you.

Warning

Thousands of customers already trust us, and we work hard to keep it that way.

Info

Our team has done this many times, so you never have to guess.

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">Onboarding guides and live chat help new colleagues get going on day one.</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">Real-time dashboards show what is on track and what needs attention.</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">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-warning h-full">
      <div class="card-header">
        Warning
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">Thousands of customers already trust us, and we work hard to keep it that way.</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">Our team has done this many times, so you never have to guess.</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

Set up in an afternoon, connect the tools you use and invite your team.

Success border

Start in minutes and get help from a real person whenever you need it.

Danger border

Clear prices, honest advice and no surprises along the way.

<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">Set up in an afternoon, connect the tools you use and invite your team.</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">Start in minutes and get help from a real person whenever you need it.</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">Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

12Product cards

Shop cards with label, wishlist button, rating, price and add-to-cart.

-15%

Engineering

Automation pack

(102)

$15.00

Product

Starter plan

(173)

Free

Sales

Sales pipeline add-on

(302)

$17.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-6.svg" class="card-img-top" alt="Automation pack"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-15%</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">
          Engineering
        </div>
        <h6 class="card-title">Automation pack</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" 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">(102)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$15.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-1.svg" class="card-img-top" alt="Starter plan">
        <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">
          Product
        </div>
        <h6 class="card-title">Starter plan</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" 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">(173)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">Free</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-10.svg" class="card-img-top" alt="Sales pipeline add-on">
        <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">
          Sales
        </div>
        <h6 class="card-title">Sales pipeline add-on</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" aria-label="Rated 4.4 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">(302)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$17.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.

tutorial

Seven automations every team should set up

Our open API and ready-made integrations fit into the stack you already have.

Kai Patel

May 24, 2026 · 3 min read

<div class="card h-full" style="max-width: 22rem;">
  <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="How remote teams keep projects on track">
  <div class="card-body">
    <span class="badge bg-primary-subtle text-primary-emphasis mb-2">tutorial</span>
    <h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">Seven automations every team should set up</a></h5>
    <p class="card-text text-muted">Our open API and ready-made integrations fit into the stack you already have.</p>
  </div>
  <div class="card-footer bg-transparent flex items-center gap-2">
    <img src="../assets/img/avatar-4.svg" alt="Kai Patel" class="rounded-full shrink-0" width="32" height="32">
    <div class="small">
      <div class="font-semibold">
        Kai Patel
      </div>
      <div class="text-muted">
        May 24, 2026 &middot; 3 min read
      </div>
    </div>
  </div>
</div>

14Card group

card-group joins cards edge to edge with equal heights; they stack below sm.

Practical experience

Granular roles keep sensitive work private while everyone else stays informed.

just now

Modern idea

Every update lands in one place, so nothing gets lost in email threads.

yesterday

Calm dashboard

Your data is encrypted, backed up daily and hosted in the region you choose.

just now

<div class="card-group">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?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">Practical experience</h5>
      <p class="card-text small">Granular roles keep sensitive work private while everyone else stays informed.</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-1522202176988-66273c2fd55f?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">Modern idea</h5>
      <p class="card-text small">Every update lands in one place, so nothing gets lost in email threads.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">yesterday</small>
    </div>
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1690264459911-6d68c747d8a7?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">Calm dashboard</h5>
      <p class="card-text small">Your data is encrypted, backed up daily and hosted in the region you choose.</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.

Secure experience

Teams report saving around five hours a week after the first month.

Clear routine

Automations take care of the repetitive steps, so people can focus on real work. Start free, upgrade when you grow and cancel any time with one click.

Bright release

Granular roles keep sensitive work private while everyone else stays informed.

Secure goal

Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.

<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-1690264459911-6d68c747d8a7?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">Secure experience</h6>
        <p class="card-text small text-muted mb-0">Teams report saving around five hours a week after the first month.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1742440711276-679934f5b988?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">Clear routine</h6>
        <p class="card-text small text-muted mb-0">Automations take care of the repetitive steps, so people can focus on real work. Start free, upgrade when you grow and cancel any time with one click.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1690378820474-b468b8ee64d3?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">Bright release</h6>
        <p class="card-text small text-muted mb-0">Granular roles keep sensitive work private while everyone else stays informed.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?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">Secure goal</h6>
        <p class="card-text small text-muted mb-0">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

16Testimonial card

A quote with rating and the customer's photo and role.

Real-time dashboards show what is on track and what needs attention. Thousands of customers already trust us, and we work hard to keep it that way.

Arjun Carter

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-ink">
      <i class="bi bi-quote" aria-hidden="true"></i>
    </div>
    <blockquote class="blockquote mb-4"><p class="text-base">Real-time dashboards show what is on track and what needs attention. Thousands of customers already trust us, and we work hard to keep it that way.</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-3.svg" alt="Arjun Carter" class="rounded-full shrink-0" width="44" height="44">
      <div>
        <div class="font-semibold">
          Arjun Carter
        </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

Aria Okafor placed a new order

22 hours ago

Sofia Brennan left a comment

just now

Nora Silva joined the team

4 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>Aria Okafor</strong> placed a new order
        <div class="text-muted">
          22 hours 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>Sofia Brennan</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 Silva</strong> joined the team
        <div class="text-muted">
          4 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 Halo Works newsletter

One email a month. Start in minutes and get help from a real person whenever you need it.

<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 Halo Works newsletter</h5>
    <p class="card-text text-muted small">One email a month. Start in minutes and get help from a real person whenever you need it.</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">Role-based access</a></h5>
        <p class="card-text small text-muted mb-0">We measure success by how many customers come back and tell their friends.</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">Real-time collaboration</a></h5>
        <p class="card-text small text-muted mb-0">Our team has done this many times, so you never have to guess.</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">Dark mode</a></h5>
        <p class="card-text small text-muted mb-0">Every update lands in one place, so nothing gets lost in email threads.</p>
      </div>
    </div>
  </div>
</div>