Card

Stable

Cards group related content into one bordered box: one tenancy, one inspection, one group of settings. They help managers see where one thing ends and the next begins.

Use cards sparingly. A page made only of cards is harder to scan than a table or a summary list.

Next inspection

14 Oct 2026, Flat 3, 22 Ashby Road

Reschedule

---

Specifications

LightDark

Anatomy

Next inspection

14 Oct 2026, Flat 3, 22 Ashby Road

Reschedule

1) Title (optional)

font-size: var(--at-text-md) /* 16px */

font-weight: var(--at-weight-bold)

margin-bottom: var(--at-space-3) /* 8px */

2) Content

any content: text, a summary list, buttons

3) Container

border: 1px solid var(--at-border)

border-radius: var(--at-radius-2) /* 10px */

background: var(--at-surface)

box-shadow: var(--at-shadow-raised)

Size and spacing

Card

16px padding on every side.

Padding

padding: var(--at-space-5) /* 16px */

Width

fills its container

space cards with .at-stack (16px gap)

Card

Emphasis: Medium

The default: white with a light shadow, for a record or a group of settings.

LightDark

Example

Reminders

Sent 3 days before rent is due.

Muted card

Emphasis: Low

Grey background and no shadow, for supporting content beside the main card, such as a tip or a summary.

LightDark

Example

How this works

Readings sync from the supplier every hour.

---

Usage

When to use

• Grouping the details of one thing.
• Separating groups of settings on one page.

When not to use

• Several records with the same fields: use a table.
• Wrapping the whole page: COHO already draws a frame.
• Inside another card.

Content

• Card titles are short nouns: "Next inspection", "Reminders".
• Put at most one or two actions in a card.

Do and don't

Reminders

Sent 3 days before rent is due.

Late fees

Off

DoSeparate cards for separate groups, spaced with a stack.

Reminders

Sent 3 days before rent is due.

Don'tCards inside cards.

Do

• Give each card a heading.

Don't

• Nest cards.
• Use coloured card backgrounds.

---

Implementation

HTML

Copy

<div class="at-card">
  <h2 class="at-card__title">Next inspection</h2>
  <p class="at-muted">14 Oct 2026, Flat 3, 22 Ashby Road</p>
  <button type="button" class="at-button">Reschedule</button>
</div>

Classes

Class	What it does
at-card	White box, border, small shadow
at-card--muted	Grey surface, no shadow
at-card__title	Card heading

Tokens used

--at-border, --at-surface-raised, --at-shadow-raised, --at-bg-neutral

---

Accessibility

• Use a real heading element for the card title so it appears in the page outline.

Related

Stack and inline

Two layout helpers that space things consistently: stack (vertical) and inline (horizontal, wrapping).

View component

Summary list

Key and value pairs for one record, such as a property or tenancy.

View component

Empty state

What to show when there is nothing to show yet.

View component