Cards

Flexible card components for displaying grouped content.

Interactive Card Demo

Customize card variants, sizes, and content sections.

Variant

Size

Options

Show ImageShow Footer

Card Title

Card subtitle description

This is a card component with customizable variants, sizes, and content sections. Use it to display grouped content.

HTML

<!-- Card Component -->
<div class="card card-default">
  <img class="card-image" src="/api/placeholder/400/200" alt="Card image" />
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
    <p class="card-subtitle">Card subtitle description</p>
  </div>
  <div class="card-body">
    <p>Card content goes here. This is where you describe the main content of the card.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Action</button>
    <button class="btn btn-secondary">Cancel</button>
  </div>
</div>

Basic Usage

HTML

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Action</button>
  </div>
</div>

Variants

CSS

.card            /* Default bordered card */
.card-outlined  /* Transparent with colored border */
.card-elevated  /* Shadow-based card */

Sizes

CSS

.card-sm   /* Small card (max-w-xs) */
.card-md   /* Medium card (max-w-sm, default) */
.card-lg   /* Large card (max-w-md) */

With Image

HTML

<div class="card">
  <img class="card-image" src="image.jpg" alt="Card image" />
  <div class="card-body">
    <h3 class="card-title">Card with Image</h3>
    <p>Cards can include images at the top.</p>
  </div>
</div>