Website editor blocks

Please let us know if any issues or queries via [email protected].

Headings

Headings are used to structure your page. They should not be used just to make text big, or draw attention to text. Use big text options for that.

Heading 1 is the page title, so you can't use those again in pages.

Heading 2 should be major sections of the page.

Subsequent heading levels can help subdivide those sections. However, if you end up using these a lot, consider splitting your page into multiple pages and linking off with navigation tiles, or using an accordion.

It's really important headings are structured carefully in terms of grouping the content on the page. Otherwise, screen readers and other accessibility tools won't be able to understand the page, and the table of contents won't work correctly.

Buttons

Buttons are a great way to highlight the most important call to action in your page content.

To add a button just add a button block in the page editor. Note you can add several blocks in a single group of buttons.

When writing links and buttons, make sure they have a clear action. Use verbs and active doing words like "Get involved" or "Submit your idea". Definitely don't write 'click here' or 'here' as this isn't accessible!

Ideally you would have just 1-2 buttons as your main call to actions. If you need more than 2 buttons, use the navigation tile block.

Navigation tiles

Navigation tiles ("link tiles") now come in image and non-image varieties, to avoid unnecessarily clunky navigation when there is no good reason for images to be used. They also come in three delightful pastels - purple (125 Plum), yellow (Bentham's Teeth) and grey (affectionately, eff-two-eff-two-eff-two).

So e.g. navigation tiles without images:

And with images:

Horizontal rules

Avoid using horizontal rules where you can. Never use them just before a heading.

Accordions

Accordions are ways of allowing users to browse content based on headings. Clicking a heading expands the content below.

Teal heading

No grey background!

Another heading

Also no grey background.

Columns

Columns are useful for splitting content across the page. Do not use them to arrange navigation tiles.

If you find yourself having to do complex column arrangements to make the page look how you want - you may be fighting the theme, and should try to simplify and standardise. We want pages and user experience to be consistent, and the tools in the editor are set up for that.

Here is an example of three columns:

Table of contents

Table of contents can be enabled in the sidebar of the editor, using "Show table of contents" under "Images, display & theme". Note it uses headings at level 2 for the list, so you need to make sure your page is well-structured with headings.

In this section

In this section on landing pages is automatically generated from the menu structure of pages. You can edit this in the sidebar, under "Menu settings" - the menu should be "Sitemap/structural" to show up in in this section.

Tagged Content / Events

This block is used to display content or events that are tagged. It shows three contents/events. Make sure the tag value exists.

Embed

Use embed blocks to include external media — such as videos, playlists, posts, or maps — directly in your page.

1. Click the + button to add a new block.
2. Search for “Embed” or a specific platform (e.g. YouTube, Spotify, Twitter/X, Google Maps, etc.).
3. Paste the URL of the media you want to include (e.g. a YouTube video link or Spotify playlist link).