Component guide

Content blocks

This is a content block, and where most of your core content will go. You can add as many content blocks as you need to divide up your page.

Here you can use headers to break up your content. Using ## for Header 2, ### for Header 3 and ### for Header 4. Generally - when using headers, they should be in order of size. For example use H2, H3, then H4, or H2, H3, H2, H3, H4. Not H2, H4, H3.

Why? It creates a clear, logical outline that helps screen readers navigate the page, helps search engines understand your main topics, and makes content easier for everyone to read.

The content block is also where you can add:

• a
• bullet
• list

or:

1. a
2. numbered
3. list

Inline links

You can also add links within a sentence, for example: Living on a boat on the Grand Union Canal is fun.

Avoid using here or other one-word links. One-word links or vague labels make text hard to scan, hurt users with blind spots or low vision, and miss chances for better search engine rankings. Clear links tell people and search tools what the next page is about before they click it.

[Our content guides can be found on Navigate]

Collapsible text blocks

Tables

Using tables can help present data and information in a clear, organised way. Be sure to label each column with description headings.

Videos

You can add video anywhere on the page where it can support or illustrate your copy and messaging. To embed, simply insert the video URL into the Embed Link field.

[link to a guide]

Routes and maps

You can add a map or a route onto your page for location-based data such as events and walking/cycling/paddling routes.

• For maps (specific location) insert Lat/Long data into the relevant component fields. We recommend a zoom of 14, but this can be adjusted if you want to zoom in or out further.
• For routes (multiple locations) these need to be set up by a content editor and requires additional building.

Logos

If you need to add one logo to your page, we recommend using the image grid component, which looks like this:

If you need to add multiple logos, use the logo park component, which looks like this:

Remember, these logos need to be square. Use Microsoft Paint to reshape your image before uploading or it will look like the middle logo shown above.

Impact statistics

Great for reporting impact - displays keys statistics and figures. Best for report pages and landing pages highlighting headline figures. Not best for information that will soon be out of date.

Signposting and CTAs

There are a few ways you can display or feature onward links and Calls To Action (CTAs) with images on-page:

Buttons

This component for signposting is only to be used for clear, single actions, following a piece of related content. In general, they are to be used as a standalone link, ie a one-off for donate asks or signups.

Having too many buttons on a web page creates decision fatigue, distracts users from the main goal, and clutters the visual layout. When everything looks like an important action, visitors feel overwhelmed and often choose to leave the site instead. 

Top tip

Start all CTA and button links with a verb. They should be direct and use active language. They are there to signpost or encourage the user to take the next step.

Quotations

Using quotes on your page can add credibility and depth to your content. You can use them to:

• support your points
• provide evidence
• add expert opinion
• highlight important statements

Images

To add a full width image to your page, you'll need the media image component. Most images can be directly uploaded into our library, as long as they are landscape. If they appear to be cropped once published, you should resize your image to a 16:9 ratio.

Image gallery

If you have a number of images to display, you could use our image gallery component which will appear in one space, and automatically loop the images. Great for museum pages and event pages.