Skip to main content

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 withCall 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.

Pairs with: Hero, Text

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.

Pairs with: Hero, Text


Buttons

Just the buttons — your call, your row

 

A simple row of one or more buttons, for when you need actions without the heading-and-pitch framing of a Call to Action. The quiet, flexible way to offer links that look like decisions. Use it when:

  • offering a few parallel choices ("Tickets", "Directions", "Programme");
  • a tidy link-out beneath content.
  • Skip it when there's one big ask — a CTA gives that more weight.

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.

Northern Village Partners