Typography
Heading 2 — Section Title
Heading 3 — Subsection Title
Heading 4 — Card or Widget Title
Heading 5 — Label / Eyebrow Use
Heading 6 — Fine Print Heading
Lead paragraph. Used to introduce a page or section — slightly larger, lighter weight than body copy. Ideal for the first paragraph below a page title or hero block.
Body copy paragraph. This is the default text size for standard page content. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.
Inline styles: bold text, italic text, strikethrough, underline, a standard link, and inline code.
Small / caption text. Used beneath images, for legal copy, footnotes, or secondary metadata.
Colours
Brand Palette
Primary
–wp–preset–color–primary
Secondary
–wp–preset–color–secondary
Accent
–wp–preset–color–accent
Base (background)
–wp–preset–color–base
Contrast (foreground)
–wp–preset–color–contrast
Neutral
–wp–preset–color–neutral
Buttons
Primary
Secondary / Outline
Button Group
Button on Dark Background
Links
Standard body link — inline within paragraph copy.
Navigation-style standalone link: Explore the region →
Visited link example: once visited, this link will display the visited colour.
Images & Media
Standard Image with Caption
Rounded Image
Media & Text — Image Left
Media & Text Heading
Body copy alongside the image. Use this layout for feature callouts, about sections, or paired storytelling. Works best with a strong, high-contrast image.
Media & Text — Image Right
Image Right Variant
Same block with media position reversed. Alternate this with the left-image version across a page to create visual rhythm without additional styling.
Cover Block
Cover Heading Over Image
Supporting text below the heading. Keep it short — one line if possible.
Image Gallery
Lists
Unordered List
- First list item
- Second list item with a bit more text to show line wrapping behaviour at narrower container widths
- Third list item
- Nested item one
- Nested item two
- Fourth list item
Ordered List
- Step one — do this first
- Step two — continue here
- Step three — nested example
- Sub-step a
- Sub-step b
- Step four — final action
Tables
Default Table
| Column A | Column B | Column C | Column D |
|---|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | Row 1, Cell 4 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 | Row 2, Cell 4 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 | Row 3, Cell 4 |
| Row 4, Cell 1 | Row 4, Cell 2 | Row 4, Cell 3 | Row 4, Cell 4 |
| Footer A | Footer B | Footer C | Footer D |
Blockquotes & Pullquotes
Blockquote
This is a blockquote. Use it for longer passages attributed to a specific person or source. Keep quoted text faithful to the original and include a citation below where possible.
Author Name, Title or Source
Pullquote
A pullquote draws a key phrase out of the body text for emphasis. Keep it brief — one strong sentence.
Source Name
Verse / Preformatted
Preformatted / verse block.
Preserves whitespace and line breaks exactly as entered.
Useful for code snippets, poetry, or fixed-width content.
// Code block — for longer snippets with syntax context
function greet( name ) {
return `Hello, ${ name }!`;
}Separators
Default (centred, short)
Wide (full container width)
Dots
Coloured Separator
Spacing & Layout
Spacer Tokens
The following spacers correspond to your spacing scale tokens. Labels reference --wp--preset--spacing--{size}.
↕ XS spacer (var:preset|spacing|xs)
↕ SM spacer (var:preset|spacing|sm)
↕ MD spacer (var:preset|spacing|md)
↕ LG spacer (var:preset|spacing|lg)
↕ XL spacer (var:preset|spacing|xl)
Column Layouts
Two columns. Equal width. Good for side-by-side feature blocks or two-up card layouts.
Second column. On mobile these stack vertically by default. Use the “Stack on mobile” toggle to control this per block.
Three columns. One third each.
Second of three columns.
Third of three columns.
Two-thirds / one-third split. Common layout for main content with a sidebar or supporting callout. The wider column takes 2/3 of the available width.
Narrower column — sidebar content, pull stats, or a CTA.
Full-Width Background Section
Full-Width Background Group
This group spans the full viewport width with a background colour applied. Inner content is constrained to the content width set in theme.json. Use for CTA bands, feature sections, and alternating-background layouts.
Dark Background Section
Dark Background Section
Body text on a dark background. Verify contrast ratio meets WCAG AA (4.5:1 minimum for normal text). Use your base colour token for text here.
Notices & Alerts
These use custom CSS classes. Add corresponding styles in your theme’s style.css or a block styles registration in functions.php.
Info: This is an informational notice. Use for neutral context, tips, or helpful supplementary content.
Success: Confirmation message. Use after a completed action like a form submission or booking confirmation.
Warning: Something needs attention. Use for caveats, seasonal closures, or anything requiring user awareness before proceeding.
Error: Something went wrong. Use sparingly — only for genuine failures or blocking issues the user must resolve.