Cards

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

Stat card

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

Code

<div class="card card--stat rounded box stack">
  <p class="title">Revenue</p>
  <p class="value font-metric">$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

89

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>

Panel Title

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>
Placeholder image

Media card

Image fills the card width with no extra margin.

Placeholder image

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

Summary card

One item in a grid of items, such as a space, a team or a proposal draft: a linked heading, a short description and a footer of facts. Cards in a row stretch to the same height and their footers line up. Headings stop after three lines and descriptions after four, with an ellipsis; the item’s own page shows them in full.

Code

<ul class="grid list-none">
  <li class="card card--summary scheme-subtle rounded">
    <div class="header box stack">
      <h3 class="card-heading"><a href="/spaces/board">Board room</a></h3>
      <p class="description">Preparation between meetings.</p>
    </div>
    <footer class="footer box cluster cluster-between items-center text-sm">
      <div class="cluster cluster-compact items-center">
        <div class="avatar-group" aria-hidden="true">
          <span class="avatar avatar--sm"><span class="initials">A</span></span>
          <span class="avatar avatar--sm"><span class="initials">B</span></span>
          <span class="avatar avatar--sm"><span class="initials">C</span></span>
        </div>
        <span aria-hidden="true">+2</span>
        <span class="visually-hidden">5 members</span>
      </div>
      <span class="font-bold">4<span class="visually-hidden"> conversations, 1 unread</span></span>
    </footer>
  </li>
</ul>
.card--summary
Lays the card out as a column. The footer sits at the bottom, below a muted rule, however long the header is.
.header
Holds the heading and description. In a summary card it has no rule of its own.
.card-heading
Usually a link to the item. Stops after --card-heading-lines lines (3).
.description
Stops after --card-description-lines lines (4).
.footer
Facts about the item. Lay it out with cluster cluster-between: people at the start, counts or dates at the end. Any card can use .footer; it is ruled off from what comes before it.

Show people with an avatar group of up to three, then the rest as text such as “+2”. Hide the avatars from screen readers and give the count in visually hidden text. To mark unread activity, make the count bold and say so in visually hidden text.

Summary card with an author

For items one person owns, such as a proposal draft. Replace the footer’s facts with the author: an avatar beside their name and the date. Long names stop at one line with an ellipsis, so footers in a row stay the same height. The avatar is decorative and has an empty alt. Visually hidden “By” tells screen reader users whose name it is. Dates are text-xs, the default size for <time>.

Code

<li class="card card--summary scheme-subtle rounded">
  <div class="header box stack">
    <h3 class="card-heading"><a href="/proposals/patronage">Revise the patronage formula</a></h3>
    <p class="description">Weights client and internal hours the same way.</p>
  </div>
  <footer class="footer box cluster cluster-compact cluster-nowrap items-center text-sm">
    <span class="avatar"><img src="ada.jpg" alt=""></span>
    <div class="min-w-0">
      <span class="block truncate"><span class="visually-hidden">By </span>Ada Okafor</span>
      <span class="block text-xs text-muted">Edited <time datetime="2026-10-17">2 days ago</time></span>
    </div>
  </footer>
</li>

Summary card with an author and members

For items one person leads and others join, such as a proposal draft with collaborators. The author starts the footer and the member count ends it. Long names stop at one line so the count always fits. Icons are Phosphor Bold, the set Baseplate uses: users-three for members and chats for conversations.

The date can be a sentence such as “Edited 2 days ago” or, as in Chat, a clock icon and a short <time> label: the time for today, “Yesterday”, or a date such as “Sep 28”. Put the full date in datetime and add visually hidden “Last updated” so screen reader users know what the time means.

Code

<li class="card card--summary scheme-subtle rounded">
  <div class="header box stack">
    <div class="cluster cluster-between cluster-nowrap items-start">
      <h3 class="card-heading min-w-0"><a href="/proposals/patronage">Revise the patronage formula</a></h3>
      <span class="badge badge--blue">New</span>
    </div>
    <p class="description">Weights client and internal hours the same way.</p>
  </div>
  <footer class="footer box cluster cluster-between cluster-nowrap items-center text-sm">
    <div class="cluster cluster-compact cluster-nowrap items-center min-w-0">
      <span class="avatar"><img src="ada.jpg" alt=""></span>
      <div class="min-w-0 text-sm">
        <span class="block truncate"><span class="visually-hidden">By </span>Ada Okafor</span>
        <span class="flex items-center gap-025 text-xs text-muted">
          <svg class="icon flex-none" aria-hidden="true" focusable="false" viewBox="0 0 256 256" fill="currentColor">...</svg> <!-- Phosphor Bold clock -->
          <span class="visually-hidden">Last updated </span><time datetime="2026-10-17">Oct 17</time>
        </span>
      </div>
    </div>
    <span class="inline-flex items-center gap-025 flex-shrink-0">
      <svg class="icon flex-none" aria-hidden="true" focusable="false" viewBox="0 0 256 256" fill="currentColor">...</svg> <!-- Phosphor Bold users-three -->
      <span>5</span><span class="visually-hidden"> members</span>
    </span>
  </footer>
</li>

To mark an item the reader hasn’t seen, put a badge after the heading: “New” for an item they haven’t opened, “Updated” for one that changed since they last did. Wrap the heading and badge in cluster cluster-between cluster-nowrap items-start and add min-w-0 to the heading so it wraps beside the badge. The badge follows the heading, so screen readers hear the title first. Leave it out when there’s nothing new.