Card

boodoo's cards provide a flexible and extensible content container with multiple variants and options.

About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Bootstrap's cards, boodoo's will feel right at home.

Example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card w-100">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Titles, text, and links

Card title

Card subtitle

Some quick example text to build on the card title.

Card link Another link

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header and footer

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card">
  <div class="card-header"><span>Featured</span></div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Horizontal

Horizontal card

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card card-horizontal">
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%237753fa'/%3E%3C/svg%3E"
    alt="..." class="demo-img-h200">
  <div class="card-body">
    <h5 class="card-title">Horizontal card</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
    </p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Card color variants

Header

Primary card title

Some quick example text.

Header

Success card title

Some quick example text.

Header

Danger card title

Some quick example text.

<div class="row g-3">
  <div class="col-md-4">
    <div class="card text-bg-primary mb-3 card-primary">
      <div class="card-header"><span>Header</span></div>
      <div class="card-body">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-success">
      <div class="card-header"><span>Header</span></div>
      <div class="card-body">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-danger">
      <div class="card-header"><span>Header</span></div>
      <div class="card-body">
        <h5 class="card-title">Danger card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
  </div>
</div>

Interaction

Add .card-hover (or .hoverable) for a Material lift-and-shadow on hover, or .card-clickable for an interactive card that raises and tints its border.

Hover card

Hover me — I lift.

Clickable card

I'm a link card with a stretch.

Raised (elevation 2)

Material elevation look.

<div class="row g-3">
  <div class="col-md-4">
    <div class="card card-hover">
      <div class="card-body">
        <h5 class="card-title">Hover card</h5>
        <p class="card-text mb-0">Hover me — I lift.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <a href="#" class="card card-clickable text-decoration-none">
      <div class="card-body">
        <h5 class="card-title">Clickable card</h5>
        <p class="card-text mb-0">I'm a link card with a stretch.</p>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <div class="card card-raised">
      <div class="card-body">
        <h5 class="card-title">Raised (elevation 2)</h5>
        <p class="card-text mb-0">Material elevation look.</p>
      </div>
    </div>
  </div>
</div>

Card groups

Card title

With supporting text.

Last updated 3 mins ago

Card title

Equal height thanks to flexbox.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">With supporting text.</p>
    </div>
    <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Equal height thanks to flexbox.</p>
    </div>
    <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
  </div>
</div>

Image overlays

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

<div class="card">
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='300'%3E%3Crect width='384' height='300' fill='%2316131f'/%3E%3C/svg%3E"
    class="card-img" alt="...">
  <div class="card-img-overlay text-white">
    <h5 class="card-title">Card title</h5>
    <p class="card-text mb-0">This is a wider card with supporting text below as a natural lead-in to additional
      content.</p>
  </div>
</div>

Card layout helpers

Use .card-grid for a responsive gap-based card grid, or the flexbox .row-cols-* helpers with cards for equal-width layouts.

Container Queries (@container)

Unlike legacy frameworks that only adapt cards according to the browser viewport, boodoo features first-class CSS container queries. Wrap your card in .card-container and use .card-responsive: the card automatically reorganizes from vertical to horizontal based on its parent container's width.

Container-Responsive Card

When parent width exceeds 480px, this card automatically shifts to a horizontal layout without viewport media queries.

Learn more

<div class="card-container">
  <div class="card card-responsive">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title"><span>Container-Responsive Card</span></h5>
      <p class="card-text"><span>Adapts to its container size.</span></p>
      <a href="#" class="btn btn-primary"><span>Action</span></a>
    </div>
  </div>
</div>

Modern CSS :has() Parent Styling

boodoo automatically enhances cards based on their child elements using native CSS :has() parent selectors without JavaScript watchers:

Urgent Issue

Alert

Cards containing .badge-danger automatically tint their border red via :has(.badge-danger).

Verified

Active

Cards containing .badge-success automatically tint their border green.

<!-- Card border tints automatically based on the badge inside -->
<div class="card p-3">
  <span class="badge badge-danger"><span>Alert</span></span>
  <p class="card-text"><span>Styled natively via :has(.badge-danger)</span></p>
</div>