Card Component

Classes: .card, .card-header, .card-media, .card-body, .card-footer, .card-shadowless

Features:

• Flexible card structure with header, media, body, and footer sections
• Shadow, border, and hover effects

Example

Title

Body

Footer

Usage:

<div class="card">
  <div class="card-header">Card Title</div>
  <img class="card-media" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop" alt="Media" />
  <div class="card-body">Body</div>
  <div class="card-footer">Footer actions</div>
</div>

Example

Usage:

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-body">Main content goes here.</div>
  <div class="card-footer">Footer actions</div>
</div>

Customization:

• Remove shadow with .card-shadowless
• Add utility classes for further styling