List and detail

A table of records, and a detail view for one of them.

List

LightDark

Example

Inspections

Property	Status
22 Ashby Road	Due soon	View
9 Mill Lane	Done	View

HTML

Copy

<header class="at-header"><h1 class="at-header__title">Inspections</h1></header>
<table class="at-table"><thead><tr><th>Property</th><th>Status</th><th></th></tr></thead><tbody>
  <tr><td>22 Ashby Road</td><td><span class="at-tag at-tag--warning">Due soon</span></td><td class="at-num"><button type="button" class="at-button at-button--link">View</button></td></tr>
  <tr><td>9 Mill Lane</td><td><span class="at-tag at-tag--success">Done</span></td><td class="at-num"><button type="button" class="at-button at-button--link">View</button></td></tr>
</tbody></table>

Detail

LightDark

Example

22 Ashby Road

Inspection

Mark done

Due

14 Oct 2026

Inspector

Jo Patel

Status

Due soon

HTML

Copy

<header class="at-header"><div><h1 class="at-header__title">22 Ashby Road</h1><p class="at-header__subtitle">Inspection</p></div><button type="button" class="at-button at-button--primary">Mark done</button></header>
<dl class="at-summary"><dt>Due</dt><dd>14 Oct 2026</dd><dt>Inspector</dt><dd>Jo Patel</dd><dt>Status</dt><dd><span class="at-tag at-tag--warning">Due soon</span></dd></dl>

In a quick view, open the detail in place and offer a link back. Do not open new windows.