Pages
A page says where the regions of a whole screen go and what scrolls: a header and a footer, a sidebar that stays, a list beside its detail. It is written with utilities and the two frames, page and shell, and draws no surface of its own. Copy the markup, then fill the regions with blocks and components.
Site pages
- PageA header, the main region and a footer in a frame as tall as the viewport.
- DocumentationNavigation, an article at a reading measure, and the contents of the page.
- Holy grailA header, three columns and a footer, with the middle one first in the source.
- CenteredOne task in the middle of the viewport, alone or beside a panel.
Application pages
- App shellA sidebar that stays while the main region scrolls, and a drawer when it is narrow.
- Master-detailA list beside what is chosen in it, each scrolling by itself.
- DashboardFigures across the top and panels in a grid that reflows without queries.
- SettingsA short navigation beside the sections of a long form.