# Card

Status: stable

A bordered box that groups related content, such as one tenancy or one setting group.

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.

## Example

```html
<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>
```

## Anatomy

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

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

- **Width**: fills its container; space cards with .at-stack (16px gap)

## Variants

### Card (emphasis: Medium)

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

```html
<div class="at-card"><h2 class="at-card__title">Reminders</h2><p class="at-muted">Sent 3 days before rent is due.</p></div>
```

### Muted card (emphasis: Low)

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

```html
<div class="at-card at-card--muted"><h2 class="at-card__title">How this works</h2><p class="at-muted">Readings sync from the supplier every hour.</p></div>
```

## 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

Do: Separate cards for separate groups, spaced with a stack.

```html
<div class="at-stack"><div class="at-card"><h2 class="at-card__title">Reminders</h2><p class="at-muted">Sent 3 days before rent is due.</p></div><div class="at-card"><h2 class="at-card__title">Late fees</h2><p class="at-muted">Off</p></div></div>
```

Don't: Cards inside cards.

```html
<div class="at-card"><div class="at-card"><h2 class="at-card__title">Reminders</h2><div class="at-card"><p class="at-muted">Sent 3 days before rent is due.</p></div></div></div>
```

## Do

- Give each card a heading.

## Don't

- Nest cards.
- Use coloured card backgrounds.

## Code

```html
<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

`--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.