Cards | Wintermuted UI Theme Docs

Base card — `.card` / `.wm-card`

Minimal surface with border, radius, and backdrop blur. Add padding via .card-body or inline as needed.

Simple card

Any content can live inside the base card.

Another card

Cards sit side-by-side in a grid naturally.

<div class="card wm-card" style="padding: 1.25rem;">
  <strong>Card title</strong>
  <p>Card body text.</p>
</div>

Structural slots — `.card-header` / `.card-body` / `.card-footer`

Use structural slots for cards with clear title rows, action footers, or both. Each slot handles its own padding and separator borders automatically.

Card header

Content lives in .card-body. The header and body are separated by a 1 px border.

Header + footer

Active

A .card-footer provides a muted action row at the bottom with a top border.

Header actions

The header uses justify-content: space-between, so any trailing element becomes a header action.

<!-- Header + Body + Footer -->
<div class="card wm-card">
  <div class="card-header">
    <h4>Card title</h4>
    <span class="badge badge-accent">Active</span>
  </div>
  <div class="card-body">
    <p>Main content area.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary">Cancel</button>
    <button class="btn btn-primary">Save</button>
  </div>
</div>

Accent border variants

A 4 px left border communicates semantic tone. Compose with the base .card class. Pairs well with structural slots.

Info

.card-accent-info

Success

.card-accent-success

Warning

.card-accent-warning

Danger

.card-accent-danger

<div class="card wm-card card-accent-success" style="padding: 1.25rem;">
  <strong>Realized savings</strong>
  <p>$34.00 saved this month.</p>
</div>

<div class="card wm-card card-accent-warning" style="padding: 1.25rem;">
  <strong>Projected savings</strong>
  <p>$12.00 if you cancel 2 more.</p>
</div>

Accent + structural slots

Accent variants compose naturally with .card-header and .card-body.

Cancelled subscriptions

You've cancelled 3 subscriptions saving $34.00/mo.

Pending cancellation

2 subscriptions marked for review. Projected saving: $12.00/mo.

<div class="card wm-card card-accent-success">
  <div class="card-header">
    <h4>Cancelled subscriptions</h4>
  </div>
  <div class="card-body">
    <p>You've cancelled 3 subscriptions saving $34.00/mo.</p>
  </div>
</div>

Card grid layout

Cards naturally fill a CSS grid. Use auto-fill with minmax for responsive columns without media queries.

Item A

Description for item A.

Item B

Description for item B.

Item C

Description for item C.

Item D

Description for item D.

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;">
  <div class="card wm-card">
    <div class="card-header"><h4>Item A</h4></div>
    <div class="card-body">Description.</div>
  </div>
  <!-- repeat … -->
</div>

Composition examples

Cards are intentionally bare — they provide the surface; other components handle their own styling inside.

Netflix