Skip to content
KolayCSS

Cards

Cards group related content with header, body and footer sections.

Live demo

Header
Example card

A card with a header, body and footer.

2 days ago
Shadow card

Uses the .shadow utility class.

New
Dark card

Uses bg-dark and text-white utilities.

Code

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some quick text</p>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

Tip: .shadow, .shadow-sm and .shadow-lg add shadows; .bg-dark + .text-white is the dark counterpart.