Blocks
Hero
The first thing visitors see — make it count.
Use it when
A Hero is the bold banner at the top of a page: a headline, a line or two of text, usually a button, often over a background image. It sets the tone before anyone scrolls. use it when:
- You're opening a home or landing page and want one confident statement above the fold.
- You have a single clear message and a single clear action.
- Skip it on quick utility or content pages — a plain heading is enough.
Options
Message — Heading, Subheading, and Body. Keep the heading short; let the body do the explaining.
Button — Button Text + URL, and a Button Colour from your theme. One button beats three.
Background image — add an Image and choose how it sits (Image Display: cover behind the text, or beside it).
Layout — Text Position (left / centre / right), Text Width, Text Colour, and Text Under Image on Mobile so small screens stay readable.
Tips
- One Hero per page, at the very top.\
- A 5–8 word headline outperforms a paragraph.
- High-contrast background or let the theme darken it — legibility first.
Pairs with — Call to Action, Text Columns
Village CMS Websites
Signposts as cards.
Linked cards — icon, image, or clean plain style — that act as a visual menu into the most important parts of your site. Friendly signposts.
Use it when:
- guiding visitors from a landing page to your key sections.
Options
- Card look (Card Style, Colour, Alignment, Heading Format);
- Grid (Cards per row, Gap, Image max width, Box Shadow, Soft Corners);
- Cards (the repeatable list).
Tips
- icon style for a clean, fast directory, image style for warmth;
- one clear label per card.
Call to Action
One clear ask, impossible to miss.
A centred, stand-out section — heading, a sentence of context, and a single button — built to turn a reader into a doer. It's the moment you stop explaining and invite the visitor to act.
Use it when:
- you want one focused next step (donate, sign up, get in touch);
- a long page needs a decision point.
- Skip it if there's no single action — use plain Buttons instead.
Options
Message (Heading + Body — keep the heading to the ask, the body to one reassuring line);
Button (Text, URL, and a theme Button Colour so it matches the site).
Tips
One ask per CTA; lead the button with a verb ("Reserve a seat");
Place it after you've made the case, not before.
Options
- Layout (Alignment + Size for the row);
- Buttons (a repeatable list, each with its own label, URL, colour).
Pairs with:
Tips
- one to three buttons — more reads as a menu;
- make the primary action the boldest colour and list it first.
Display Logos
A row of logos
Presents partner, sponsor, or member logos in a tidy, evenly-spaced row, each optionally linking out. Quiet credibility.
Use it when: showing supporters, funders, affiliations, or "as seen in".
Options
- Section Heading;
- Logos (repeatable — image + optional link).
Tips
- normalise logo heights and backgrounds so the row looks deliberate;
- greyscale for an understated look.
Pairs with: Testimonials, Call to Action.