Block guide
This page exists for the people who edit the site: each section below shows one block exactly as it renders on the public site. Blocks come in two families — prose blocks, which flow down the measured text column (and are the only ones news articles and the page left column can use), and full-width sections, which span the whole page.
Text fields support simple markup everywhere: two asterisks for bold, one for italic and two underscores for underline — exactly as this paragraph demonstrates.
Lead paragraph
A lead paragraph is the larger opening text — use one at the top of a page to set the scene before the detail starts.
Paragraph
The ordinary body paragraph, for the bulk of a page's text. Press Enter twice in the editor for a new paragraph block, or keep related sentences together in one.
Heading
Every heading block on this page is a Heading — they divide the page into sections and are collected automatically into the "on this page" menu. Give one an anchor ID to link to it directly, e.g. /block-guide#table.
List
- An unordered list for things without a sequence
- Each line in the editor becomes one bullet
- Keep items short — a bullet is a signpost, not a paragraph
- Switch on "Ordered list" for numbered steps
- The numbers are added automatically
- Reordering the lines renumbers them
Table
| Week | Dates | Ages |
|---|---|---|
| Leyland | 3–7 August | 4–14 |
| Samlesbury | 10–14 August | 4–14 |
Callout
The green informational callout, for helpful asides that should stand out from the body text.
The red urgent callout — reserved for safeguarding and genuinely urgent instructions, so it keeps its force.
Two-up lists
- Two labelled lists side by side
- Each panel has its own colour
- Good for included / to bring
- A packed lunch
- Suncream and a hat
- Old clothes
Accordion (FAQ)
Questions and answers — the answer stays hidden until the visitor taps the question, so a long FAQ does not swamp the page.
As many as you like, but past eight or so consider splitting the page instead.
Pull quote
A pull quote lifts one line out of the page — use it for a voice, not for emphasis.
Testimonial
“The testimonial is the full-width cousin of the pull quote — a centred band on the tinted background, for a parent or volunteer voice between sections.”
A sample attribution
Image
Embedded frame
Downloads
Stat band
The stat band is a full-width section. It also comes in a light "tint" surface for pages where the dark band is too heavy.
Gift ladder
Text + image
A split section
Heading and paragraphs one side, photo the other — the workhorse full-width section. The image can sit left or right.
- 01
An optional numbered list
With coloured figures.
- 02
Add buttons too
Primary and secondary.
A Text + image block can carry an anchor ID — this one does, which is why "A split section" appears in the menu on the left.
Steps
Four steps across
First
Steps render as an ordered grid of four.
Second
Each has a title and a line of text.
Third
Good for how-it-works sequences.
Fourth
They wrap to two columns on phones.
Ordinal cards
Ordinal cards
Numbered cards with an optional intro column that stays put while the cards scroll.
One
The intro column on the left is optional.
Two
Without it the cards span the full width.
Three
Cards take a title and a short text.
Four
The figures are coloured automatically.
Action cards
Open roles
Sample roles
A role with an apply link
Each role lists a description, commitment and minimum age.
One full week
15
A role without an apply link
Leave the apply link empty and no Apply button is shown for that role.
Days or full week
18
CTA band
The closing call to action
A full-width dark band, usually last on the page.
Site panels
Panel one
Two full-bleed photo panels side by side.
Panel two
Titles sit over the bottom of the photo.
Photo CTA
News teaser
The news teaser pulls the newest published posts live — nothing is stored in the block except the heading and how many to show.
Training dates (live)
Upcoming training days
This block reads the training calendar live from the volunteer portal.
Nothing is scheduled right now — this is the block's empty state, which you can word yourself.
Volunteer sources (live)
Where our volunteers come from
Reads this year's recruitment sources live from the portal. Collapsed until the visitor asks for it.
Video
Forms and the countdown
Three blocks are described here rather than shown. The Form (flexible) block is a form you design field by field — submissions land in the Site editor's Form submissions tab, and can be emailed to a role inbox. The Volunteer form is the fixed register-your-interest form wired to the recruitment pipeline. Neither is demonstrated on this page because both would collect real submissions.
The Bookings countdown renders nothing at all until an opening date is set, then counts down to the second and flips to a red "bookings open" band at the moment itself. It can also sit as a banner above the hero. See the home page in the run-up to registration for the real thing.