Master–detail

A list beside its detail. Under 48rem only one shows, chosen with data-view.

.master-detailCSS only

Examples

Master–detail

Northlight 2h Atlas 1d Harbor 3d

Detail pane.

Anatomy

`.master-detail`	Full-height grid (at least `100dvh`): a φ⁶ ≈ 18rem list column and the detail. One column under 48rem.
`> :first-child`	The master, usually a `.list`. Scrolls on its own, with a hairline on its end edge.
`> :last-child`	The detail of the selected item.

API

Attribute	Values	Description
`data-view`	`listdetail`	Under 48rem, which side shows; the other is hidden. Default `list`. Switching it is up to you.

Accessibility

Under 48rem the hidden side is display: none, gone for screen readers too. When you switch to detail, move focus to its heading and offer a way back that sets data-view="list".
Mark the selected row with aria-current="page" (or "true") so the list says which item the detail belongs to. The .list tints it and draws the accent edge.