The triage motif at page scale: a persistent record list beside a reading-measure detail pane. Selection is a hypermedia exchange — the item hx-gets its card into the pane; the composite wraps in a sidebar layout so the list docks beside the detail on wide screens and stacks above it on narrow ones.
Composed of: sidebar-layout · master-detail · center · stack · cluster · badge · card
<div class="sidebar-layout" style="--sidebar-width: 18rem">
<div class="master-detail">
<ul class="master-detail__list" aria-label="Invoices">
<li><a class="master-detail__item" href="#" aria-current="true" hx-get="/mock/master-detail/inv-001" hx-target="next .master-detail__detail">INV-001 · Acme</a></li>
<li><a class="master-detail__item" href="#" hx-get="/mock/master-detail/inv-002" hx-target="next .master-detail__detail">INV-002 · Globex</a></li>
<li><a class="master-detail__item" href="#" hx-get="/mock/master-detail/inv-003" hx-target="next .master-detail__detail">INV-003 · Initech</a></li>
</ul>
<div class="master-detail__detail">
<div class="card card-body">
<div class="card-label">INV-001 · Acme</div>
<div class="card-value">£1,250.00</div>
<div class="card-delta">Paid · 2 days ago</div>
</div>
</div>
</div>
<main class="center" data-measure="prose">
<div class="stack" data-gap="md">
<h1>Invoice INV-001</h1>
<p>The reading pane holds whatever the selected record needs — notes, an activity feed, a form. It keeps a comfortable measure regardless of how wide the screen gets, and drops below the list on a phone.</p>
<div class="cluster" data-gap="sm"><span class="badge" data-tone="success"><span class="badge-icon"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg></span>Paid</span><span class="badge" data-tone="neutral">Net 30</span></div>
</div>
</main>
</div>