List-detail view
A list of items on one side, the selected item's full content on the other. The layout every email client uses.
See it
What it is
Two coordinated panes where selection in one drives content in the other: a scrollable list of items on the left, the full record on the right. Apple's docs call it a split view, older Windows and Java docs call it master-detail, and every email client, Slack, and Linear runs some version of it.
Reach for it when people scan many similar records and dip into a few: inboxes, tickets, files, contacts. The point is keeping your place in the list while reading one item, which a full-page navigation destroys.
Two gotchas. On narrow screens the panes cannot sit side by side, so the pattern collapses to a stack: the list fills the screen and the detail pushes over it with a back button. And the selected item must live in the URL, otherwise refreshing, sharing a link, or hitting back dumps the user into a blank right pane. Which means the blank right pane is a screen you have to design, not an accident.
Ask AI for it
Build a list-detail (split view) layout: a fixed 320px left pane with a scrollable list of rows showing title, one-line snippet, and timestamp, beside a flexible right pane rendering the selected item in full. Clicking a row highlights it with a tinted background and updates the right pane, and the selected item id is stored in the URL so refresh, back, and link-sharing all restore the same selection. Support up and down arrow keys to move the selection through the list. Below 768px collapse to one column: show the list alone, and slide the detail over it with a back button in the header. Design a detail empty state (icon plus 'Select an item to read it') for when nothing is selected.