List Detail Split Layout

The master-detail lane relationship that keeps list browsing and open-record reading in one governed page rhythm.

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

Use the pattern page for the lane relationship and the component page for the extracted layout seam.

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

Contract Highlights

What This Pattern Governs

The lane relationship itself is the pattern: closed list-only state, desktop open split, mobile overlay, mirrored RTL layout, and independent scroll pressure.

State model

Closed, open, overlay

The layout should open into a pushed two-lane relationship on desktop and a full-sheet detail overlay on mobile, without freezing parent search or empty-state logic into the seam.

Pressure rule

Independent scrolling

List and detail lanes should keep independent scrolling under longer content so one lane does not hijack the reading posture of the other.

Localization

Mirror the full relationship

RTL should mirror the lane placement and keep readable widths instead of applying only late cosmetic flips to an LTR-only split model.