Soft violet and coral light on a deep indigo background

A demo of v-page

A website built from bricks

Acme is a placeholder brand. Every section on this page is a brick: stored in a Payload CMS, rendered by Next on the server and explained as you scroll.

How it is built Read the journal

What it does

A CMS and a front end that share one brick set

The editor and the site read the same schemas, so what an editor saves is exactly what a visitor sees.

Bricks with variants
Twelve page bricks, from hero to prose. Each offers its layouts as variants an editor picks from a list.
How bricks store data
Links that follow pages
A link stores the page, not its address. Rename or move a page and every link to it moves along.
English and German
Every page has a slug and sections per language. A language without sections falls back to English.
Roles and review
Authors write drafts, reviewers approve them, approvers publish. Editing an approved page sends it back to draft.
Read the review flow
Light, dark and system
Visitors pick a colour mode or follow their device. Every brick takes its colours from the same tokens.
How colour modes work
Fast and accessible
Pages render on the server, and the site ships no JavaScript of its own. Every brick variant is tested with axe in light and dark.

Stored meaning

Stored meanings, not class names

A brick stores what an editor means: a hero with the image at the start, medium spacing, a muted background. It never stores a CSS class. The component decides how each choice looks.

So a redesign changes the stylesheets, and no page has to be touched.

Read how it works

Soft spheres in peach and violet on a cream background

The bricks

A few of the bricks on this site

Hero

Four variants: split, centered, over a background image or text only. The top of this page is the background one.

See the split hero

Spheres in violet and coral on a dark ground

Text and media

Copy beside an image or a video, or laid over an image under a scrim that keeps the text readable.

See the overlay

Blue and mint waves on a deep blue ground

Post header and prose

The article bricks: a title with chapters, then a reading column with headings, lists, figures and a table of contents.

Read an article

Peach and coral arches on a cream ground

Grid, carousel and collection

Three ways to lay out the same cards, icons, images and link lists. This row is a carousel.

See a collection

Store what the editor means. Let the component decide how it looks.

AcmeProduct principle

Journal

Notes on how it works

Three articles on the ideas behind v-page. Each one is itself a page of article bricks.

How bricks store meaning, not markup
One schema per brick, tokens instead of classes, and links that follow their pages.
Read the article
From draft to published: the review flow
Four states, one review for both languages, and what a publish needs.
Read the article
Light, dark and system: theming bricks
One switch, one set of colour tokens, and contrast that is tested in both modes.
Read the article