Dashboard · Style Gallery

Recommended Pattern Stack

Order panels by decision priority, not by visual symmetry. Headings and filters should precede the regions they control.

Prefer normal document scrolling. Introduce internal scroll containers only for panels whose independent scroll state is part of the task.

Source order: Order panels by the decision path a reader should follow; do not let grid placement make lower-priority panels read first.
Focus expectation: Filters, chart controls, and panel actions must follow the same priority order as their controlled regions.
Scroll expectation: If a panel scrolls internally, name the panel, keep its heading outside or at the start of that scroll region, and verify focus is not trapped inside it.
Semantic risk: Repeated metric cards can become anonymous groups; use headings, table/list semantics, or labelled regions before applying grid classes.
Cognitive risk: Dense dashboards increase comparison load; group metrics by task and avoid relying on position or color alone to explain status.
Verification method: Combine automated landmark/heading/contrast checks with manual keyboard, source-order, and cognitive walkthrough evidence; use user evidence for task-completion claims.

Let repeated panels reflow through grid constraints before adding viewport breakpoints. Action clusters should wrap before they overflow.

Make page gutters, panel gaps, and minimum panel widths explicit. Avoid hiding a panel's overflow unless the panel has a declared fixed block size.

Do not use this recipe for a single focused workflow. A form flow or content-limiter is usually clearer.

Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.