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

Header and footer

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

Card color variants

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.

Card groups

Image overlays

Card title

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

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.