Patterns

Frames content with collapsible navigation, brand and theme on top, account below.

Aligns and spaces the breadcrumb, title, description, and actions.

Connects search, filters, applied state, and reset.

Connects selection, sorting, filters, column settings, and pagination.

Connects item padding, hover areas, status, and detail links.

Confirms a lightweight action next to the control that triggered it.

Connects input, validation, server errors, and pending and success states.

Connects queued, running, canceled, and partially failed states to build logs.

Organizes body text, table of contents, code, callouts, and language switching.

Connects quick navigation, commands, and search results from the keyboard.

Explains failures, restricted access, lost connections, and recovery paths.

Collapses and expands desktop navigation on mobile.

Lays out data panels on a responsive grid with their titles, states and refreshes.