Layout

The main column of an app page, used once per page

A reading column for a whole page: articles, documents, settings

A page for one short task, centred on the screen: sign in, reset password, a confirmation. Its headings, text and actions are centred; a form or section inside takes the full width

The site header at the top of every page: the site name and its navigation

The frame of an app with a sidebar: one layout.aside beside the main column. Used once, around the signed-in part of the app

A page with its own section nav beside its content: settings, account, a project’s admin. Put the nav first (a nav of nav.page links), then the content. On phones the nav sits above it

Content beside the main column: a docs sidebar, filters, a table of contents

The site footer at the bottom of every page

A part of a page made of separate blocks, with or without a title: a section under its heading, the cards in a column, a panel’s contents

A few closely related elements kept together, e.g. a heading and its text

Content at the start of a line and its controls at the end: a section’s title and its button, a panel’s title bar, a list entry with its actions. The controls drop below when the line runs out of room

An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size

A form: renders <form> and stacks its fields

One form field: its label, input, help text and error

One setting changed in place: its label and help text at the start, its switch or menu at the end. Settings pages, preferences

Commands side by side: a form’s buttons, a dialog’s choices

The main calls to action under a page’s pitch headline: the install command and the guide beside it, a size up from other buttons

Controls that act on the content below them: filters, views, refresh

The options for one setting, side by side in one track with the chosen one filled: theme, view, units

A line of small facts about an item: time, author, counts

Labelled facts about the subject of a page, side by side under its title with rules between: profile, status, component. Children are layout.fact

One labelled fact in a layout.facts: a text.term above its text.value

Links to the pages beside this one, side by side with the open one filled: the other intents in a domain. One line; scrolls sideways when it overflows, with no scrollbar. Pass data-fade="start", "end" or "both" to fade the edges that hide more. Children are nav.page; pass current on the open one

A code block with the bar above it: what the code is (TSX, Terminal) and a Copy button. Holds a layout.group bar, then one text.code

Records with the same fields, compared across: members, invoices, API keys. Write plain thead, tbody, tr, th scope="col" and td inside, with no classes; data-off on a tr greys out a row that is switched off. data-head="bar" sets the header row on a bar and pads the outer columns, for a table that runs edge to edge in a panel with no padding. With more columns than fit on a phone, wrap it in a layout.scroller. data-arrival makes its rows rise into place; give each tr a growing animationDelay to stagger them

Content wider than its column, which the reader scrolls sideways: a table with many columns, a long line of code, a board. Give it tabIndex={0} and an aria-label, so keyboard users can scroll it too

The row of nav.paging links below a long list or table. Give it aria-label="Pagination"

An amount shown as a row of blocks, like a battery: the more blocks filled, the more of it. Each block is a layout.blocks.cell, with data-on on the filled ones; data-tone="success", "warning" or "danger" on the row colours them by level. Give it aria-valuenow, aria-valuemin and aria-valuemax

One block of a layout.blocks; data-on when it is filled

An icon or avatar with a status dot on its corner: a device and whether it is online. Put the icon first and a text.indicator last

A chart: a trend over time, a breakdown. Renders <figure>; put the chart's svg or canvas inside with a height, and a text.caption that says what it shows

A bar that stays at the bottom of the screen while the content under it scrolls or changes: the now-playing bar, a cart total, a long form’s submit button on phones

A few items side by side where the one in focus takes more of the room: featured photos, picks of the week. On small screens they stack, top to bottom. Children are layout.showcase.item; mark the one in focus with data-active

One item in a layout.showcase: its media, then its title and caption. Mark the caption with data-caption: it always takes its room, and shows only on the item in focus, so nothing moves. It rises into view when it appears (stagger them with an animationDelay), widens when it has data-active, and its image keeps its height and crops to fit

Controls drawn over a photo or video, like the arrows in a dialog.media: the buttons inside get a translucent dark backing so they read on any image

Points made in running text, in no particular order, each a layout.point: the items of a bulleted list in prose

Points made in running text that follow an order, each a layout.point: steps, a ranking

One point in a layout.points or layout.steps list, holding its text

A list of items of the same kind: articles, people, notifications. Children are layout.item

One entry in a layout.list

A self-contained box about one thing: a sign-in box, a profile summary. Its border is quieter than a layout.teaser’s, since it does not open anything

A home page section pairing a pitch with a live demo: a layout.feature.copy and a layout.feature.demo, side by side on wide screens, the copy taking the narrower side

The pitch in a layout.feature: its heading, a lead and a link to more, centred against the demo

The live demo in a layout.feature, on its own inset panel

A live example with its code attached underneath, in one frame with the code block’s edge: a layout.preview.bar, a layout.preview.stage, then a layout.preview.code

The bar on top of a layout.preview: what it shows on the left, its copy button on the right, ruled off from the stage

Where a layout.preview renders its live example, recessed and centred

The code under a layout.preview’s stage: its code block sits flush, without its own corners or border, ruled off from the stage

A bordered box of rows read like a table: props, rules, the intents of a domain. Holds a layout.list of layout.term or layout.situation rows, padded to the box’s edge

A term and what it means, side by side on wide screens with the term in a fixed column, stacked on phones: a prop, a token, a rule

A situation and the intent it calls for, in an "If it is / Use" layout.index. Pass data-current on the row for the page you are on

A box in a layout.collection that previews one page and opens it as a whole: its nav.item title covers the box. Its border reads stronger than a layout.panel’s, and it lifts a level on hover

The main column of a marketing page: the home page, with its own typeface and roomier sections

A shell command to copy and run: the main call to action wherever it appears. Its copy button covers the whole box, so a click anywhere copies

The registry shown behind a demo app, decorative: the entries for what is on screen, the current one lit

The moving list inside a layout.registry; it slides so the current entry is in view

One intent in a layout.registry; data-active on the one the demo points at

The backdrop a product demo sits on: a band behind the window, with the layout.registry behind the app

A framed preview of an app inside a page: a title bar above the app

The toolbar of a layout.window, drawn like a browser: back, forward and reload, the address, and its controls on the right

A small agent terminal floating over an example app: the conversation and checks that produced it

The title bar of a layout.terminal: window buttons, the title in the middle, its controls on the right

The lines in a layout.terminal: the newest at the bottom, older ones fading out at the top. data-still shows a finished run whole, with no fade

An agent terminal shown in the page flow, at a fixed height: a layout.terminal.bar, then a layout.terminal.log. data-still lets a finished run set its own height

A row of running counts above something that produces them, each a layout.tally.item

One count in a layout.tally: a text.tally (with a text.delta beside it) over a text.caption naming it

Wraps something that rises into place as it appears, like the cards of a feed. Give each a growing style={{ animationDelay }} to stagger a row of them, and a key that changes to play it again

A full-width strip a step lighter than the page, edge to edge, for the section a page closes on: the last call to action

An example app shown inside a page, in its own theme

A full example app in the home page’s tabs, in the site font and its own accent

Shows the top of something tall, fading out at the bottom: an example app inside its frame on the home page, the frame drawn whole around it

An amount within a known range, shown as a filled track: battery, storage used, a quota. Give it aria-label, aria-valuenow, aria-valuemin and aria-valuemax, and one layout.meter.fill inside

The filled part of a layout.meter. Set its width to the amount with style={{ width: "62%" }}; data-tone="warning" or "danger" when the amount is a problem, "muted" or "faint" for a value it is compared with

Outlines the element an inspector points at, drawn over the page at its position, with its text.marker above. data-mode="outline" draws only a faint dashed outline, for every intent at once

Equal items shown side by side as a grid: people to follow, featured sources. It fits as many columns as its own width allows, so it works in a sidebar as well as across a page; set columns from a breakpoint only when the count matters

A message about the page that the user can dismiss: check your email, password updated

Stands in for content that is still loading: a full-width line of text unless you give it the shape of what will appear

A break between two parts of the same content: groups in a menu, sections of a panel. Runs across whichever way its parent flows

Content that opens and closes in place under a text.summary line: an FAQ answer, advanced settings

A layout.disclosure in a bordered box, for a long block of optional detail: its text.summary is a row with a chevron that turns when open, and a line under it separates the content. Pad the content yourself