Cards

Bordered containers for stats, info panels, and activity feeds.

Stat card

Display key metrics with a title, value, and optional description.

<div class="card card--stat rounded box stack">
  <p class="title">Revenue</p>
  <p class="value">$12,450</p>
  <p class="description">+12% from last month</p>
</div>

Revenue

$12,450

+12% from last month

Users

1,234

+5% this week

Tasks

12 completed today

Schemes applied

Apply color schemes to cards for visual variety.

Code

<div class="card scheme-subtle rounded box stack">...</div>
<div class="card scheme-dark rounded box stack">...</div>
<div class="card scheme-accent rounded box stack">...</div>

Subtle scheme applied

Subtle

Dark scheme applied

Dark

Accent scheme applied

Accent

Card with header

Add a bordered header with .header for panel-style cards.

Code

<div class="card rounded">
  <div class="header box">
    <h3>Panel Title</h3>
  </div>
  <div class="box stack">
    <p>Card body content.</p>
  </div>
</div>

Card body content goes here. The header has a bottom border separating it from the body.

Clickable card

Wrap a card in an anchor tag for a clickable container with hover shadow.

Code

<a href="#" class="card rounded box stack">
  <p class="title">Click me</p>
  <p class="description">This card is a link.</p>
</a>

Click me

This card is a link. Hover to see the shadow effect.

Card with media

A figure+content card for images, avatars, or media alongside text.

Code

<div class="card card--media rounded">
  <figure><img src="photo.jpg" alt="Description"></figure>
  <div class="box stack">
    <h3>Title</h3>
    <p>Description text.</p>
  </div>
</div>

Media card

Image fills the card width with no extra margin.

Another media card

Works with any image or avatar inside a figure.

Activity cards

List-style cards separated by bottom borders. Last item has no border.

Code

<div class="activity-card">
  <p>Activity item content.</p>
</div>

Jane Doe updated the project settings.

2 hours ago

John Smith added a new document.

Yesterday

Sarah Lee joined the workspace.

3 days ago