Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Normal paragraph text Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Large sized paragraph text that can be used as the intro for some pages. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Important:
Don’t use the different Heading numbers in order to get a particular font size. You don’t ever need to add another H1 to a page as the title will automatically use it and you only have one H1 per page.
The next level of subtitles will be H2s and if they are broken into subsections themselves they will be H3 – it’s important for SEO and accessibility to stick to that hierarchy.
You can change the size of text with this dropdown
Primary colour
Secondary colour
Tertiary colour
Dark colour is the off-black used for text
The website’s background colour is the one called ‘Card background’ –
You can give backgrounds a white colour to add a nice subtle effect
Buttons
You can choose whatever colours you like, but it’s best to stick to these two combinations.
Lists
Default
- Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
- Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
Large bullets
- Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
- Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
Chevron list (used mainly for links)
- Donec ullamcorper nulla non metus auctor fringilla.
- Etiam porta sem malesuada magna mollis euismod.
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Large numbers ordered list
- Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
- Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
Separators
Default – use to divide sections
Dots – use to divide subsections
Spacers
You can’t see these visually but they’re an important block for layout building. By default, you add a Spacer block then choose its height by inputting a px height or by dragging and stretching it. The problem with that is that it’s not very mobile-friendly as the height is fixed across all screens. So a 80px spacer might look good on desktops but would be too big on a mobile. For that reason it is better to use the preset ones – S,M,L,XL instead as they are more ‘responsive’ to device sizes.
Default one (starts at 100px)
Small
Medium
Large
XL
Quotes
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
Said by someone once
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Widths
Many blocks have this ‘align’ setting which allows you to set the width to either ‘None‘ (which is the standard content width), Wide or Full. The wide width is used a lot for creating layouts.
Content (aka ‘None’) width
Most paragraphs should stick this default content width because that’s best for line-length and readability.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
Wide width
Some elements can be selected for ‘Wide’ width – which is useful for things that have columns in for example. Avoid letting paragraphs of text run to this wide width though as the line-length can be too long t be read comfortably.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
Full width
You’d only select this to create blocks of background colour. Use it sparingly as it can mess up the formatting of other blocks placed inside it. You would usually toggle the ‘Inner blocks use content width‘ options, or create a full width group, then another Default or Wide Group inside that so that the colour background is edge to edge, but the content is still contained inside the normal widths.
Use colours sensibly!
Just because you can create different background and text colour combinations, it doesn’t mean you should. Text should only ever be white or dark. Coloured text on a coloured background always looks a bit naff.
Group blocks
Using Groups is the key to building page layouts. The easiest thing is to create your text or content first, then select it all and Group it:
Once you have a Group, it is common to give it a background colour (and change the text and link colour to white if need be). You can also select some Styles as well:
Default Group block
Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Group with icon
Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Media and Text block
This is a good one that can be used in lots of places and has plenty of customisation options. It is usually best to give it a coloured background.
Lorem ipsum
Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.
Columns
Accordion / FAQS
Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.
Featured Content Areas
This one has a lot of options built-in
This is a title
Another title here
Third title
You can also add in subtitles if you want
Author Bio Box
Person's name
Job title
Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Call to Action
Heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Chid pages
Icon list
Icon tabs
Football
Baseball
Featured publication
Featured Publication
AAA All Blocks
Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Mailchimp signup
Recent posts
What new sectoral bargaining could mean for pay and workforce stability
Jun 2026
Beyond rhetoric: what is really sustaining – or undermining – DEI in UK workplaces?
Jun 2026
IPA Employee Voice Survey
Apr 2026
The five disruptors of the UK industrial model
Apr 2026
Employee Voice: What, Why and How
Mar 2026
Amplifying employee voice for the future of work: evidence from Scotland
Mar 2026
Voice and the Future of Work in Contemporary Warehousing
Mar 2026
Some things change, some stay the same…
Mar 2026
Don’t panic, Captain Mainwaring
Jan 2026
Why Employee Voice Matters More Now Than Ever
Nov 2025
What ARE Gen Z looking for from work?
Nov 2025
A more successful economy based on better work for all
Oct 2025
Good industrial relations must underpin the Employment Rights Bill
Oct 2025
Listen! Speak up! Be Safe!
Sep 2025
Is the people factor being lost in the productivity debate?
Sep 2025
Related pages
AAA All Blocks
Source
Source:
Staff
Testimonial slider
Featured/related pages – cards and list
This block has multiple options all within the same block – so you can switch the layout at any time. You can select from blog posts, pages etc (and a mixture if need be). You can either select them manually or have it pulled in automatically by the category (only blog posts have categories though). Plus you can switch between a ‘card’ layout and an ‘inline’ layout that takes up a bit less room.
Related pages
Common rights in the single market? The EU and rights at work in the UK
