Layout

How a page is divided. These shapes take regions rather than content: they say where things stand, and know nothing of what stands there.

Zones The two-pane workspace: a split, a sized column, a scrollable body. What every explorer, editor and detail view in an app is built on. Blocks The surface a group of things sits on, padded or not, with its card and figure variants. Toolbar A line of actions above or below what they act on, in its roomy and compact densities. Tabs One page showing one of several faces, with the panels that follow the choice. Doc layout The two-column documentation pattern — prose on one side, code on the other — that folds to one column when there is no room. Focus One thing to do and nothing around it: the window as one region, a card in its middle.