Layout
v1.0.0Added in 1.0.0
The page grid of a record (a client, a contact, an invoice): header, a main column of sections and a side panel, plus the section card.
Read a record the way it is built: the header on top, the main sections (activity, notes, invoices) on the left and the side panel (details, contacts, files) beside them once the layout itself is wide enough (960px of content), which sticks while the long column scrolls and scrolls on its own when it is taller than the screen. Below the breakpoint the panel moves under the main column, above it, or into a second tab: a full-width segmented control that sticks under the top bar, where a tap (or Tab then the arrow keys) switches panes with a short fade and both panes keep their scroll and state. Every section card has a title with a count, a pencil to edit and a ⋯ menu (an action sheet on phones); a collapsible section opens and closes from anywhere on its header row, with a mouse, a tap, or Enter / Space on the focused title, and its chevron turns. Loading sections show skeleton lines and fade into their content; empty ones show a small empty state with an action. Tab order is always header, main, side panel.
npx wingo-ui@latest add detail-layoutPro item: the CLI needs a Pro account. See plans
breakpoint: lg · aside: sticky, 360px · phone: aside below, tab main · header: scrolls · last: none