How we build a page

Start with the blocks

Everything on this page is a block. A block is a small, self-contained section with its own fields — a hero, a callout, a gallery — and a page is nothing more than the list you put them in. Reordering the list reorders the page.

There is one library shared by every kind of page. What differs is which part of it a given collection offers: a landing page can place the whole library except the article furniture, and an article gets the groups that belong inside prose. Neither list is maintained by hand, so a block added to a group appears in the right pickers on its own.

Then choose the shape

The shape is a page-level choice, made once, independent of the blocks inside it. An article offers four: full width, a single centred reading column, that column with a sidebar, or that column with a contents rail on the left and a sidebar on the right — the shape this page is using.

How the contents rail is built

It reads the article after it renders and lists every heading it finds. There is no separate outline to keep in step with the prose: rename a heading and the rail renames itself, delete a section and it disappears from the rail.

What happens on a phone

Both rails collapse below the article. That is not a fallback — a 240px rail at phone width would leave the prose column too narrow to read, so the contents list becomes a floating control and the sidebar drops beneath the body.

Writing the article

An article carries its own metadata — an excerpt, a cover image, a category, authors, a read time — and lives under an index page you build first. That index page's slug becomes the first part of the URL, so this article is addressed at /demo-articles/how-we-build.

• The excerpt is what an Article List shows on the card.
• The category is what a feed-mode list can filter on.
• Authors take either a team member or a typed name, for guest writers.