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.

Team analytics

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

Learn more

<div class="card" style="max-width: 20rem;">
  <img src="../assets/img/photo-1.svg" class="card-img-top" alt="Smart reporting">
  <div class="card-body">
    <h5 class="card-title">Team analytics</h5>
    <p class="card-text">Our open API and ready-made integrations fit into the stack you already have.</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

Writing status updates people actually read

Start in minutes and get help from a real person whenever you need it. Start free, upgrade when you grow and cancel any time with one click.

Posted just now

<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">Writing status updates people actually read</h5>
    <p class="card-text">Start in minutes and get help from a real person whenever you need it. Start free, upgrade when you grow and cancel any time with one click.</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

Audit trail
Dark mode

Team

$29/mo

Real-time collaboration
Role-based access
Dark mode

Business

$79/mo

Open API
Dark mode
Role-based access
Dark mode

<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> Audit trail</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Dark mode</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> 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> Dark mode</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> Open API</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> Role-based access</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Dark mode</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.

Omar Kim

QA Engineer · Auckland

Posts

22.6k

Followers

855

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-11.svg" alt="Omar Kim" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
    <h5 class="card-title mt-2 mb-0">Omar Kim</h5>
    <p class="text-muted small">QA Engineer &middot; Auckland</p>
    <div class="flex justify-around border-t border-b py-2 mb-4 small">
      <div>
        <div class="font-bold">
          64
        </div>
        Posts
      </div>
      <div>
        <div class="font-bold">
          22.6k
        </div>
        Followers
      </div>
      <div>
        <div class="font-bold">
          855
        </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.

How to choose the right plan

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

Updated 20 min ago

<div class="card overflow-hidden" style="max-width: 560px;">
  <div class="row g-0">
    <div class="col-sm-4">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-full object-cover" alt="A beginner&#39;s guide to getting started">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">How to choose the right plan</h5>
        <p class="card-text">Every update lands in one place, so nothing gets lost in email threads.</p>
        <p class="card-text"><small class="text-muted">Updated 20 min ago</small></p>
      </div>
    </div>
  </div>
</div>

6Image overlay

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

Marketing

Know what is happening, without asking

May 8, 2026

<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="Plan, build and launch in one place">
  <div class="card-img-overlay flex flex-col justify-end ca-card-shade">
    <span class="badge text-bg-light self-start mb-2">Marketing</span>
    <h4 class="card-title">Know what is happening, without asking</h4>
    <p class="card-text small mb-0">May 8, 2026</p>
  </div>
</div>

7KPI cards

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

Revenue

$19,800.08

18% vs last month

New customers

1.2k

18% vs last month

Orders

6.7k

19% vs last month

Refund rate

2.4%

7% 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">
              $19,800.08
            </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> 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">
              New customers
            </div>
            <div class="text-xl font-bold">
              1.2k
            </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-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">
              Orders
            </div>
            <div class="text-xl font-bold">
              6.7k
            </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-emphasis">
          <i class="bi bi-arrow-up-right" aria-hidden="true"></i> 19% vs last month
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-body">
        <div class="flex justify-between items-start">
          <div>
            <div class="small text-muted">
              Refund rate
            </div>
            <div class="text-xl font-bold">
              2.4%
            </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> 7% 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

Sales pipeline add-on650
API boost70
Storage pack23

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">Sales pipeline add-on<span class="text-muted">650</span></li>
    <li class="list-group-item flex justify-between">API boost<span class="text-muted">70</span></li>
    <li class="list-group-item flex justify-between">Storage pack<span class="text-muted">23</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.

Set up in an afternoon, connect the tools you use and invite your team. Start in minutes and get help from a real person whenever you need it.

Role-based access
99.99% uptime

“Friendly people answer your questions quickly, by phone, chat or email.”

<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">Set up in an afternoon, connect the tools you use and invite your team. Start in minutes and get help from a real person whenever you need it.</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>99.99% uptime</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;Friendly people answer your questions quickly, by phone, chat or email.&rdquo;</p>
    </div>
  </div>
</div>

10Background colours

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

Primary

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

Success

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

Danger

Plan projects, track progress and share updates without another status meeting.

Warning

We listen first, then build a plan around what you actually need.

Info

Every detail is handled by people who care about getting it right.

Dark

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

<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">Teams report saving around five hours a week after the first month.</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">Clear reports turn weekly numbers into decisions in minutes, not days.</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">Plan projects, track progress and share updates without another status meeting.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-warning h-full">
      <div class="card-header">
        Warning
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">We listen first, then build a plan around what you actually need.</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">Every detail is handled by people who care about getting it right.</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">Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

11Border colours

border-* utilities colour just the outline and header line.

Primary border

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

Success border

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

Danger border

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

<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">Real-time dashboards show what is on track and what needs attention.</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">Onboarding guides and live chat help new colleagues get going on day one.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border-danger h-full">
      <div class="card-header bg-transparent border-danger text-danger-emphasis font-semibold">
        Danger border
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

12Product cards

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

-11%

Engineering

Automation pack

(349)

$17.00

Engineering

API boost

(779)

$35.00

Support

Onboarding workshop

(834)

$354.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-6.svg" class="card-img-top" alt="Automation pack"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-11%</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">
          Engineering
        </div>
        <h6 class="card-title">Automation pack</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" aria-label="Rated 4.7 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">(349)</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-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-11.svg" class="card-img-top" alt="API boost">
        <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">
          Engineering
        </div>
        <h6 class="card-title">API boost</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-fill" aria-hidden="true"></i></span> <span class="text-muted">(779)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$35.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-8.svg" class="card-img-top" alt="Onboarding workshop">
        <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">
          Support
        </div>
        <h6 class="card-title">Onboarding workshop</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" aria-label="Rated 4.0 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="text-muted">(834)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$354.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.

tips

Inside our product roadmap for next year

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

Ella Okafor

May 21, 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="Our favourite tips for busy weeks">
  <div class="card-body">
    <span class="badge bg-primary-subtle text-primary-emphasis mb-2">tips</span>
    <h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">Inside our product roadmap for next year</a></h5>
    <p class="card-text text-muted">Thousands of customers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div class="card-footer bg-transparent flex items-center gap-2">
    <img src="../assets/img/avatar-12.svg" alt="Ella Okafor" class="rounded-full shrink-0" width="32" height="32">
    <div class="small">
      <div class="font-semibold">
        Ella Okafor
      </div>
      <div class="text-muted">
        May 21, 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.

Clear story

We measure success by how many customers come back and tell their friends.

56 min ago

Practical process

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

just now

Friendly community

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

42 min ago

<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">Clear story</h5>
      <p class="card-text small">We measure success by how many customers come back and tell their friends.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">56 min ago</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">Practical process</h5>
      <p class="card-text small">Clear prices, honest advice and no surprises along the way.</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-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">Friendly community</h5>
      <p class="card-text small">Our open API and ready-made integrations fit into the stack you already have.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">42 min ago</small>
    </div>
  </div>
</div>

15Responsive card grid

row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.

Elegant team

Automations take care of the repetitive steps, so people can focus on real work.

Reliable launch

Your data is encrypted, backed up daily and hosted in the region you choose. Granular roles keep sensitive work private while everyone else stays informed.

Powerful project

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

Secure dashboard

Real-time dashboards show what is on track and what needs attention. Onboarding guides and live chat help new colleagues get going on day one.

<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">Elegant team</h6>
        <p class="card-text small text-muted mb-0">Automations take care of the repetitive steps, so people can focus on real work.</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">Reliable launch</h6>
        <p class="card-text small text-muted mb-0">Your data is encrypted, backed up daily and hosted in the region you choose. 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-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">Powerful project</h6>
        <p class="card-text small text-muted mb-0">Clear prices, honest advice and no surprises along the way.</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 dashboard</h6>
        <p class="card-text small text-muted mb-0">Real-time dashboards show what is on track and what needs attention. Onboarding guides and live chat help new colleagues get going on day one.</p>
      </div>
    </div>
  </div>
</div>

16Testimonial card

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

Plan projects, track progress and share updates without another status meeting. Every update lands in one place, so nothing gets lost in email threads.

Samir Sato

Sales Executive

<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">Plan projects, track progress and share updates without another status meeting. Every update lands in one place, so nothing gets lost in email threads.</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-11.svg" alt="Samir Sato" class="rounded-full shrink-0" width="44" height="44">
      <div>
        <div class="font-semibold">
          Samir Sato
        </div>
        <div class="small text-muted">
          Sales Executive
        </div>
      </div>
    </div>
  </div>
</div>

17Activity card

A dashboard widget listing recent events with tinted icons.

Recent activitySee all

Mateo Nguyen placed a new order

just now

Ava Hughes left a comment

just now

Freya Lindqvist joined the team

1 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-fill" aria-hidden="true"></i></span>
      <div class="small">
        <strong>Mateo Nguyen</strong> placed a new order
        <div class="text-muted">
          just now
        </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 Hughes</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-fill" aria-hidden="true"></i></span>
      <div class="small">
        <strong>Freya Lindqvist</strong> joined the team
        <div class="text-muted">
          1 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 Aeroora Flow newsletter

One email a month. Every detail is handled by people who care about getting it right.

<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-fill" aria-hidden="true"></i>
    </div>
    <h5 class="card-title">Get the Aeroora Flow newsletter</h5>
    <p class="card-text text-muted small">One email a month. Every detail is handled by people who care about getting it right.</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-fill" aria-hidden="true"></i></span>
        <h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Open API</a></h5>
        <p class="card-text small text-muted mb-0">Automations take care of the repetitive steps, so people can focus on real work.</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">Audit trail</a></h5>
        <p class="card-text small text-muted mb-0">Your data is encrypted, backed up daily and hosted in the region you choose.</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">Open API</a></h5>
        <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>