Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
Choosing a Section type
From what a part of the page must show to the Section type that shows it, with the neighbor to use when the job is a little different.
Start from what the reader must take away from that part of the page, never from a layout. Find the job in the left column, then read the neighbor beside it: two types often do nearly the same job, and the difference decides.
Then fit the counts. Each Section type holds the counts it was drawn at, and the schema refuses others; Why the design holds lists them. When no type fits, the job belongs on another page, or it is a request for a new Section type.
Navigation
Heroes
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| The opening of a page: headline, lede, actions, fine print and an optional preview window. | hero |
|
| One claim on its own, set large, with one phrase in the accent. | statement |
|
| A plain page heading: a title and one line, with no actions. | page-head |
|
Proof
Features
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| A section head over a hairline grid of two, three, four, six or eight cells. | feature-grid |
|
| Copy with exactly three features beside one preview window. | feature-split |
|
| Two to four panels, each a claim with its own preview, laid out from their count. | bento |
|
| Two columns side by side: what the old way costs and what this one gives. | compare |
|
| Copy beside a numbered list of three to five steps. | steps |
|
| Copy beside a column of ruled, titled paragraphs. | text-stack |
Code and prompts
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| The code window: dark in every Theme and scheme, plain or tabbed. | terminal |
|
| One command to copy, with a note beneath it. | command-row |
|
| One API call beside its answer, a JSON response or an event stream. | api-call | |
| An API at a glance: one ruled row per route, with its method, path and job. | endpoints |
|
| The prompt a reader pastes into a coding agent, copied in one action. | agent-prompt |
|
Offer
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| One to four plans under a section head, one of them featured. | pricing |
|
| Plans as one ruled comparison table: a row per plan, a column per fact. | plan-table |
|
Questions and calls
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| A heading beside questions that open in place, every one closed at first. | faq |
|
| The final call of a page: a head, then buttons or one command, never both. | closing |
|
| Copy beside a short form: a plain post, answered with no script. | cta-form |
|
Reading
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| A reading page: an optional head and share bar, then the body as prose. | article |
|
| A blog index: a head, then the posts as ruled rows. | post-list |
|
Directory
| I need to show… | Use | Use instead when it is… |
|---|---|---|
| A listing page header in a directory: mark, name, one sentence, category and tags. | product-head |
|
| A directory list: one linked row per listing, as a list or as Tiles. | product-list |
|
Where each type appears
| Job | Section type | Carried by |
|---|---|---|
| Brand and links up top | nav | every Template |
| Links and notes at the foot | footer | every Template |
| Open the page with one claim | hero | api-product, blog, directory-list |
| One claim, set large | statement | article, blog |
| A plain page title | page-head | article, directory-list |
| Three or four figures | stats | api-product, blog, directory-list |
| Labels and values | facts | article, contact, directory-product |
| Features as a ruled grid | feature-grid | api-product, article, blog, directory-product |
| Three features beside a preview | feature-split | api-product |
| Claims, each with a preview | bento | api-product, article, directory-product |
| The old way against this one | compare | api-product |
| How it works, in order | steps | api-product, article, contact |
| Titled paragraphs beside copy | text-stack | api-product, article, blog, directory-product |
| Code or a session | terminal | api-product, article |
| One command to copy | command-row | api-product, article, blog, directory-product |
| A request beside its answer | api-call | api-product, directory-product |
| Every route at a glance | endpoints | api-product, directory-product |
| A prompt to paste | agent-prompt | api-product, article, directory-product |
| Plans to choose from | pricing | api-product, contact, directory-product |
| Plans compared fact by fact | plan-table | api-product, directory-product |
| Questions that open in place | faq | api-product, contact, directory-product |
| The last call to act | closing | api-product, article, blog, directory-list, post |
| A short form to send | cta-form | contact |
| A page of prose | article | article, post |
| Posts as ruled rows | post-list | blog |
| A listing header | product-head | directory-product |
| Listings as linked rows | product-list | article, directory-list |