Working with blocks
How the block library fits together, and when to reach for each piece.
Start with the section
Every block built after the original six carries a Section group: a background, padding above and below, a content width and an optional anchor.
Because the block draws its own section element, a background can run edge to edge — which the old shared wrapper made impossible.
Backgrounds are token pairs. Choosing one also fixes the text colour, so a section cannot end up unreadable.
Composing with columns
The Section block nests other blocks inside columns. Give a column a width, drop blocks into it, and they sit side by side on desktop and stack on mobile.
Set the padding of nested blocks to None so the container is the thing controlling the rhythm.
1// Every block follows the same shape2export const FeatureGrid: Block = {3 slug: 'featureGrid',4 fields: [5 ...headingFields(),6 /* the block's own fields */7 ...sectionFields(),8 ],9}
Field helpers
| Helper | Lives in | What it gives you |
|---|---|---|
| sectionFields() | src/fields/section.ts | Background, padding, width, anchor |
| headingFields() | src/fields/heading.ts | Eyebrow, heading, level, subheading, alignment |
| link() | src/fields/link.ts | Internal or custom link with appearance and icon |
| linkGroup() | src/fields/linkGroup.ts | An array of links, usually capped at two |
Choosing a block
Feature Grid
Repeating items of equal weight — features, benefits, capabilities.
Feature Split
One idea that needs an image beside it rather than above it.
Steps
An ordered process where the order is the point.
Accordion
Questions with answers long enough to want collapsing.
Table
Values a reader will compare across rows and columns.
Tabs
Parallel content where the reader picks one branch.