List Detail Panel

The open-detail reading pattern for one selected record, including header zoning, local error handling, and footer traversal inside a dedicated reading surface.

Status: Signed-off
Parent template: `/design-system/templates/list-page`
Component relationship: This pattern already has a documented child component seam

Live Surfaces

Review This Pattern

The pattern page explains the detail-reading contract while the component page focuses on the extracted seam.

PrioritycanonicalsList-detail-panel canonical set componentComponent seam surface parentList Page parent template

Contract Highlights

What This Pattern Governs

The panel should support real reading length, keep actions and footer traversal coherent, and degrade locally without breaking the broader master-detail rhythm.

Structure

Header, body, footer

The detail surface keeps a stable stack of copy cluster, action row, scrollable body, and footer navigation.

State model

Local errors stay local

Missing fields, long content, local detail errors, and terminal footer states all stay inside the panel rather than collapsing the broader page flow.

Responsive rule

Readable in narrow lanes

The panel should remain coherent in a half-page lane and mobile stack while parent shell framing and modal semantics stay outside the seam.