List Detail Preview - Everyday Interface Patterns

A static list-to-detail panel preview shows selected item Invoice 104, detail title Invoice 104, $48.00 amount, and Detail panel preview status.

Program

A list-detail panel should make the selected row and the detail heading agree before any routing or live selection happens.

list_detail_panel_preview.html

Visuals: captured from real browser rendering

<section class="detail-preview" aria-labelledby="detail-preview-title"><h2 id="detail-preview-title">List detail panel preview</h2><div class="split-card" aria-label="Static list and detail panel preview"><span>List: Invoice 104</span><span>Detail: Invoice 104</span></div><dl>
  <div><dt>Selected item</dt><dd>Invoice 104</dd></div>
  <div><dt>Detail title</dt><dd>Invoice 104</dd></div><div><dt>Amount</dt><dd>$48.00</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Detail panel preview</span></dd></div></dl>
  <p class="check">Learner check: the list item and detail panel agree without routing.</p>
  <p class="note">Static detail panel preview only; no drawer engine, modal, dialog API, focus trap, close interception, route change, list selection engine, resize observer, media query listener, panel animation, row mutation, API, network, storage, cookie, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live detail panel, live drawer, live routing, or live submission runs.</p></section>
<style>
  .detail-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .split-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .split-card span { border-radius: 6px; background: #ccfbf1; padding: 8px; }
  .detail-preview dl { display: grid; gap: 8px; margin: 0; }
  .detail-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .detail-preview dt { color: #475569; }
  .detail-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the list detail panel.
The section is labelled by its visible heading.
Show list and detail structure.
The static card shows a list side and a detail side.
Show exact detail rows.
The selected item, detail title, and amount are exact pinned data.
Render detail-panel-preview status.
The status badge says this is a detail panel preview.
Check list-detail readback.
The check says the list item and detail panel agree without routing.
Check detail panel honesty.
List/detail structure, exact rows, status, and no live routing.

step flow step(1) labels the source, step(2) shows the browser structure, step(3) shows exact detail rows, step(4) shows detail-panel-preview status, step(5) checks list/detail readback, and step(6) checks the honesty note.

list detail readback The section heading names the list detail panel preview surface.

detail rows Selected item, Detail title, Amount, and Status values are exact pinned data.

no live panel The lesson should not imply drawer engines, modals, dialog APIs, focus traps, close interception, route changes, list selection engines, resize observers, media query listeners, panel animations, row mutations, APIs, networks, storage, cookies, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live detail panels, live drawers, live routing, or live submissions.