Component

Cards

Cards are flexible containers that group related content. They support variants, layout options, and are fully theme-aware.

<div class="quanta-card">
  <h3 class="quanta-card-header">Basic Card</h3>
  <p class="quanta-card-body">This is a default card container.</p>
</div>

Basic Card

This is a default card container.

Variants

Choose between solid, outline, and shadow options:

<div class="quanta-card quanta-card-solid">...</div>
<div class="quanta-card quanta-card-outline">...</div>
<div class="quanta-card quanta-card-shadow">...</div>

Solid card

Outline card

Shadow card

Image Layouts

Cards with image styles:

<div class="quanta-card-not-padded quanta-card-img-full">
  <img src="/path/to/image.jpg" alt="Image" />
  <div class="quanta-card-content">
    <h3>Card with Full Image</h3>
    <p>Full width image, no padding.</p>
  </div>
</div>

Card with Full Image

Full width image, no padding.

Card Sections

Header, Body, Footer usage:

<div class="quanta-card">
  <h3 class="quanta-card-header">Header</h3>
  <p class="quanta-card-body">Body content goes here.</p>
  <div class="quanta-card-footer">
    <button class="quanta-btn quanta-btn-sm quanta-btn-primary">Action</button>
  </div>
</div>

Header

Body content goes here.

Rounded + Small Cards

Mix with utility classes:

<div class="quanta-card quanta-card-sm">Small card</div>
<div class="quanta-card quanta-card-rounded">Fully rounded card</div>

Small card

Fully rounded card