← Back to all components

Card

Content container with header, body, footer sections. Interactive variant with hover.

Card Header

Basic card with header, body, and footer.

Interactive Card

Hover me for a shadow effect.

<!-- Basic card -->
<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">Action</button>
  </div>
</div>

<!-- Interactive (hover) -->
<div class="card card-interactive">
  <div class="card-body">Hover me!</div>
</div>

<!-- Compact -->
<div class="card card-compact">...</div>