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.

Brand identity

We measure success in sign-ups, sales and brand recall, not just awards.

Learn more

<div class="card" style="max-width: 20rem;">
  <img src="https://images.unsplash.com/photo-1742440710226-450e3b85c100?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Campaign production">
  <div class="card-body">
    <h5 class="card-title">Brand identity</h5>
    <p class="card-text">We measure success in sign-ups, sales and brand recall, not just awards.</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

Five website mistakes that cost you leads

We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you.

Posted yesterday

<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">Five website mistakes that cost you leads</h5>
    <p class="card-text">We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you.</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

Weekly demos
Senior designers only

Team

$29/mo

Fixed-price projects
Fixed-price projects
Weekly demos

Business

$79/mo

Fast turnaround
Senior designers only
Award-winning team
Global clients

<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> Weekly demos</li>
          <li class="mb-1"><span class="text-success-emphasis"><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 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> Fixed-price projects</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Fixed-price projects</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Weekly demos</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> Fast turnaround</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Senior designers only</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Award-winning team</li>
          <li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Global clients</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.

Nadia Silva

Support Specialist · Prague

118

Posts

4.6k

Followers

526

Following

<div class="card text-center overflow-hidden" style="max-width: 20rem;">
  <img src="https://images.unsplash.com/photo-1753162658547-f017a4d84541?auto=format&fit=crop&w=1600&h=700&q=70" class="card-img-top object-cover" style="height: 90px;" alt="">
  <div class="card-body pt-0">
    <img src="../assets/img/avatar-12.svg" alt="Nadia Silva" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
    <h5 class="card-title mt-2 mb-0">Nadia Silva</h5>
    <p class="text-muted small">Support Specialist &middot; Prague</p>
    <div class="flex justify-around border-t border-b py-2 mb-4 small">
      <div>
        <div class="font-bold">
          118
        </div>
        Posts
      </div>
      <div>
        <div class="font-bold">
          4.6k
        </div>
        Followers
      </div>
      <div>
        <div class="font-bold">
          526
        </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.

Designing packaging that survives the shelf

Lessons from a year of client workshops

Clients stay with us for years because we treat their brand like our own.

Updated 4 days 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-1753162658407-93888aaabfae?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-full object-cover" alt="Designing packaging that survives the shelf">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Lessons from a year of client workshops</h5>
        <p class="card-text">Clients stay with us for years because we treat their brand like our own.</p>
        <p class="card-text"><small class="text-muted">Updated 4 days ago</small></p>
      </div>
    </div>
  </div>
</div>

6Image overlay

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

Web

Bold ideas, beautifully executed

Sep 17, 2026

<div class="card text-white border-0 overflow-hidden" style="max-width: 32rem;">
  <img src="https://images.unsplash.com/photo-1742440710193-3547e0b9d4db?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img" alt="Design that earns attention">
  <div class="card-img-overlay flex flex-col justify-end ca-card-shade">
    <span class="badge text-bg-light self-start mb-2">Web</span>
    <h4 class="card-title">Bold ideas, beautifully executed</h4>
    <p class="card-text small mb-0">Sep 17, 2026</p>
  </div>
</div>

7KPI cards

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

Revenue

$82,552.37

9% vs last month

New customers

4.9k

18% vs last month

Orders

5.6k

17% vs last month

Refund rate

5.2%

11% 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">
              $82,552.37
            </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> 9% 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">
              4.9k
            </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">
              5.6k
            </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> 17% 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">
              5.2%
            </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> 11% 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

Landing page833
Print collateral99
Brand sprint32

View all

<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">Landing page<span class="text-muted">833</span></li>
    <li class="list-group-item flex justify-between">Print collateral<span class="text-muted">99</span></li>
    <li class="list-group-item flex justify-between">Brand sprint<span class="text-muted">32</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.

We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.

Weekly demos
Fixed-price projects

“We have helped more than a hundred companies launch, rebrand and grow online.”

<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">We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.</p>
    </div>
    <div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
      <ul class="mb-0">
        <li>Weekly demos</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-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 have helped more than a hundred companies launch, rebrand and grow online.&rdquo;</p>
    </div>
  </div>
</div>

10Background colours

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

Primary

Fixed prices and weekly demos keep you in control from start to finish.

Success

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

Danger

We combine strategy, design and technology to build brands that grow.

Warning

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

Info

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

Dark

Our motion team turns complex ideas into short films people actually watch.

<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">Fixed prices and weekly demos keep you in control from start to finish.</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">Thousands of clients already trust us, and we work hard to keep it that way.</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 combine strategy, design and technology to build brands that grow.</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">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-info h-full">
      <div class="card-header">
        Info
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</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 motion team turns complex ideas into short films people actually watch.</p>
      </div>
    </div>
  </div>
</div>

11Border colours

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

Primary border

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

Success border

Websites we build are fast, accessible and easy for your team to update.

Danger border

Senior designers lead every project from the first sketch to the final file.

<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">We listen first, then build a plan around what you actually need.</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">Websites we build are fast, accessible and easy for your team to update.</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">Senior designers lead every project from the first sketch to the final file.</p>
      </div>
    </div>
  </div>
</div>

12Product cards

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

-28%

Web

Website package

(261)

$9,150

Social

Social kit

(47)

$1,850

Print collateral

(238)

$1,600

<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-2.svg" class="card-img-top" alt="Website package"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-28%</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">
          Web
        </div>
        <h6 class="card-title">Website package</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" aria-label="Rated 4.3 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">(261)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$9,150</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="Social kit">
        <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">Social kit</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" aria-label="Rated 3.9 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="text-muted">(47)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$1,850</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-10.svg" class="card-img-top" alt="Print collateral">
        <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">
          Print
        </div>
        <h6 class="card-title">Print collateral</h6>
        <div class="small mb-2">
          <span class="text-warning-emphasis" 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">(238)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$1,600</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.

news

A beginner's guide to getting started

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

Kenji Rossi

May 16, 2026 · 9 min read

<div class="card h-full" style="max-width: 22rem;">
  <img src="https://images.unsplash.com/photo-1787647561978-df268f9e9ec2?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">news</span>
    <h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">A beginner&#39;s guide to getting started</a></h5>
    <p class="card-text text-muted">Every detail is handled by people who care about getting it right.</p>
  </div>
  <div class="card-footer bg-transparent flex items-center gap-2">
    <img src="../assets/img/avatar-11.svg" alt="Kenji Rossi" class="rounded-full shrink-0" width="32" height="32">
    <div class="small">
      <div class="font-semibold">
        Kenji Rossi
      </div>
      <div class="text-muted">
        May 16, 2026 &middot; 9 min read
      </div>
    </div>
  </div>
</div>

14Card group

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

Reliable dashboard

We test early with real users, so the final design works on the first day.

just now

Elegant release

Every project starts with a workshop, so we understand your audience before we design.

yesterday

Fast process

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

6 days ago

<div class="card-group">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1753162658407-93888aaabfae?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">Reliable dashboard</h5>
      <p class="card-text small">We test early with real users, so the final design works on the first day.</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-1742440710453-d5db3a357362?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">Elegant release</h5>
      <p class="card-text small">Every project starts with a workshop, so we understand your audience before we design.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">yesterday</small>
    </div>
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1753162657329-beced5a7f63f?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">Fast 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">6 days ago</small>
    </div>
  </div>
</div>

15Responsive card grid

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

Honest release

From logo to launch campaign, everything is designed to work together.

Flexible team

Small teams, short feedback loops and no handoffs lost in translation. Start in minutes and get help from a real person whenever you need it.

Calm story

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

Smart journey

Clients stay with us for years because we treat their brand like our own. 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-1753162657329-beced5a7f63f?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">Honest release</h6>
        <p class="card-text small text-muted mb-0">From logo to launch campaign, everything is designed to work together.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1753162658449-e0f19e1a4cfc?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">Flexible team</h6>
        <p class="card-text small text-muted mb-0">Small teams, short feedback loops and no handoffs lost in translation. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1742440710226-450e3b85c100?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">Calm story</h6>
        <p class="card-text small text-muted mb-0">We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="https://images.unsplash.com/photo-1752650736677-94fe8cdb9d5c?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">Smart journey</h6>
        <p class="card-text small text-muted mb-0">Clients stay with us for years because we treat their brand like our own. 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.

Friendly people answer your questions quickly, by phone, chat or email. We measure success in sign-ups, sales and brand recall, not just awards.

Samir Harlow

QA Engineer

<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">Friendly people answer your questions quickly, by phone, chat or email. We measure success in sign-ups, sales and brand recall, not just awards.</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-10.svg" alt="Samir Harlow" class="rounded-full shrink-0" width="44" height="44">
      <div>
        <div class="font-semibold">
          Samir Harlow
        </div>
        <div class="small text-muted">
          QA Engineer
        </div>
      </div>
    </div>
  </div>
</div>

17Activity card

A dashboard widget listing recent events with tinted icons.

Recent activitySee all

Ava Sato placed a new order

just now

Hana Moreau left a comment

4 days ago

Theo Ibrahim joined the team

15 hours 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>Ava Sato</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>Hana Moreau</strong> left a comment
        <div class="text-muted">
          4 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>Theo Ibrahim</strong> joined the team
        <div class="text-muted">
          15 hours 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 Nimbus Kit newsletter

One email a month. We test early with real users, so the final design works on the first day.

<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 Nimbus Kit newsletter</h5>
    <p class="card-text text-muted small">One email a month. We test early with real users, so the final design works on the first day.</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">Global clients</a></h5>
        <p class="card-text small text-muted mb-0">From logo to launch campaign, everything is designed to work together.</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">Websites we build are fast, accessible and easy for your team to update.</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">Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>