UI Terms visual dictionary

Layouts

How a page is laid out. Holy grail, bento, split view, and the rest.

Asymmetric grid

A grid whose columns are intentionally uneven in width, creating visual hierarchy through imbalance.
Revenue
$24.8k
↑ 12%
⌖
Active users
★
Top rated
This week

Bento grid

A grid layout of varying-size cards arranged like the compartments of a bento box.
@container (inline-size > 16em)

Container query layout

A layout pattern where components style themselves based on the size of their container rather than the size of the viewport.

Hero

A large introductory section at the top of a page that sets the tone and message.

Holy grail layout

A page layout with a full-width header and footer, plus three columns of content between them.

Master-detail

A two-pane layout with a list of items on one side and the selected item's details on the other.

Off-canvas

A layout pattern where content lives outside the visible viewport and slides in on demand.

Split view

A layout that divides the viewport into two side-by-side panes, often resizable.

Sticky header

A header that stays attached to the top of the viewport as the user scrolls.