Layout & content: the everyday blocks
The pieces most pages are made of. This header is itself a PageHeader — left-aligned, with a background image.
A calm centered header
Wrap any words in a span to give them the accent colour. Add a background image, or leave it plain like this.
The workhorse block
This is the workhorse. Most pages are mostly this block: a heading, then a body of rich text that accepts links, emphasis, lists and quotes.
- The narrow width keeps a comfortable reading measure.
- Lists get accent-coloured bullets.
- Every line here is a field in the editor.
Notice how the line length stays easy on the eye — about 70 characters — whatever the screen.
Wide, for tables and comparisons
Switch Width to wide and the block fills the container instead — which is what you want for a table, a long comparison or anything that would feel cramped in a column.
| What you can edit | What the editor shows | Who can change it |
|---|---|---|
| Text, rich text and links | A text box, a text editor, a web address box | Everyone |
| Pictures | A picker over the site's pictures, or an upload | Everyone |
| Checkboxes and dropdowns | A tick box, a list of choices | Everyone |
| Groups and repeating lists | A set of related fields, or rows you add and remove | Everyone |
| Custom code and effects | A code editor, an effect picker | Developers only |
Framed, image right
Copy and a picture, in step
Stack several of these and flip the side, and a long page gets a rhythm instead of a wall of cards.
- An optional small label above the heading
- A checklist that builds itself from a list field
- One link, if you want one
Framed, image left
Flip it for rhythm
Same block, same fields — one dropdown moves the picture to the other side.
Bleed
Let the photo breathe
Bleed lets a strong image take more room. On a phone it drops back to a tidy rounded picture.
- Great for the one image that matters
- Works on either side
Cards with pictures
-
Bring your own photos
Pick from the picture library, or use an upload from the media library — either is optimised automatically.
-
Responsive by default
Every picture is resized for the screen it appears on, so a phone never downloads a desktop image.
How images work -
Up to twelve cards
From one to twelve cards. The grid reflows from one column to two to three.
The same grid, compact
-
Tighter
Less padding above and below.
-
Closer
Good under a header or a stats band.
-
Same fields
It is one tick-box.
A process, across the page
Three to four steps read best side by side.
-
Choose a block
Pick from the library — each one lists what it needs.
-
Fill in the fields
Words, a picture, a link. The form is built from the block's own options.
-
Publish
Save, and the site rebuilds with your changes.
A process, down the page
Longer sequences — up to eight steps — suit the timeline.
-
Discover
Work out what the site needs to say and who it is for.
-
Design
Choose a theme and sketch the page as a list of blocks.
-
Build
Compose pages from blocks; add one if something is missing.
-
Launch
Provision, deploy, and hand the keys to the client.
What we do
Build with blocks
Every page is a list of blocks, each one validated against its own schema before the site builds.
See the blocks about Build with blocksEdit as content
Change the words and pictures in a JSON file, or in the CMS, and never touch the markup.
How content works about Edit as contentKeep one contract
blocks.schema.json is the whole interface between this repo and the editor.
Read the contract about Keep one contractShown whole, never cropped
For artwork with the headline or the figure printed inside it.
Images are illustrations; finishes shown are for illustration.
This page has gone missing
The link may be out of date, or the page may have moved. Here are a few places to start again.
