Block library

This is a heading

A heading is a title that breaks your page into sections. Headings make content clearer to follow and are important for accessibility. Always use them in order, starting from Heading 2 under the main page title.

This is a sub-heading

A subheading is a smaller title under a main heading that helps organise information. Subheadings make content easier to read, guide the reader through sections, and improve understanding.

This is a H2 heading

This is a H3 heading

This is a H4 heading

This is a H5 heading

This is a H6 heading

Button

When to use buttons

Use buttons for key actions you want users to take, such as submitting a form, starting an application, or moving to the next step in a process. Buttons stand out clearly on the page and guide users toward completing important tasks.

When not to use buttons

Do not use buttons for every link on a page. If the action is minor, less important, or simply navigates to related information, use a text link instead. Overusing buttons can cause confusion, reduce their impact, and make it harder for users to know which action is most important.

Expander

An expander block hides additional information behind a toggle so readers can reveal it if they need it. It helps keep pages clear and uncluttered while still making extra detail available.

When not to use expander blocks

Avoid expander blocks for essential information that every user needs to complete a task or make a decision. Hiding critical steps or warnings can cause confusion and create accessibility issues. They are also not suitable for very large amounts of content, as repeatedly opening and collapsing long sections can be frustrating.

Details block

A details block displays extra information that can be shown or hidden by the user. It helps keep pages concise while still allowing access to supporting content when needed.

When not to use details blocks

Avoid details blocks for critical instructions, warnings, or any content that users must see to complete a task or make an informed decision. Do not hide essential information, as this can cause confusion and increase the risk of users missing something important.

Panel Block

A panel block is a styled container used to highlight important information or group related content together. It draws attention and helps users quickly see what is most relevant on the page.

Inset text block

An inset text block is used to draw attention to a short piece of supporting information by displaying it inside a styled box.

When to use inset text blocks

Use an inset text block for emphasising short notes, clarifications, or reminders that support the main content. They are especially useful when you want to highlight something that users might otherwise skim past, such as a tip, timeframe, or key consideration.

Alert block

An alert block is used to highlight urgent and critical information that users must not miss. It is styled in red with white writing to signal danger, errors, or immediate actions that need attention.

Image block

When to use image blocks

Use an image block when a picture supports or enhances understanding of the content. Images can help explain complex information, show examples, or add context. They are also useful for making pages more engaging and accessible for users who benefit from visual content.

When not to use image blocks

Avoid using image blocks for decoration only, as unnecessary images can distract readers and make pages harder to navigate. Do not use them for critical information that should always be communicated in text. Users who cannot see images must still be able to fully understand the page.

File block

A file block lets you add a downloadable file to a page with a clear link or button, making it easy for users to view or save documents.

When not to use file blocks

Avoid using file blocks if the information can be displayed directly on the page. Users prefer content in HTML as it is easier to read on all devices, faster to load, and more accessible. Only use a file block when a downloadable file is the most appropriate format.

Example PDF (13kB pdf)

Quote block

A quote block is used to display quoted text in a clear, styled format. It helps highlight words from another person, source, or piece of content.

When not to use quote blocks

Do not use quote blocks for your own writing, general text, or as a design element. If the content is not a direct quotation, it should be written as normal text or styled in another appropriate component such as an inset text or panel.

This is how a quote would look inside a quote block.

Mixd

This is how a quote would look inside a quote block.

Mixd

This is how a quote would look inside a quote block.

Mixd

Unordered lists and Ordered lists block

Lists help break information into clear, easy-to-scan items. Use unordered lists for grouped items where order does not matter, and ordered lists when the sequence is important.

When not to use lists

Do not use a list if the information is very short and can be presented naturally in a sentence. Avoid using unordered lists for processes or steps, as this can confuse users who expect order. Too many lists on one page can also make content feel cluttered and harder to read.

Unordered list

• This is a list
• With multiple items
• And here is another item

Ordered list

1. This is a list
2. With multiple items
3. And here is another item

Image gallery block

An image gallery block displays a collection of images in a grid or gallery layout. It helps present related images together in a clear, visually engaging way.

When not to use image gallery blocks

Avoid using an image gallery if a single image would be clearer or if the images are not directly related. Do not use them to display critical information that should be explained in text, as not all users can see images. Overusing galleries can also slow down page load times and make content harder to scan.

Table block

A table block is used to organise information into rows and columns, making it easier to compare data and understand relationships between values.

When not to use table blocks

Avoid using tables for long passages of text or when the information can be explained more clearly in normal paragraphs or lists. Do not use tables for layout or design purposes, they should only be used for genuine tabular data.

Audio block

An audio block lets you embed an audio file directly on a page so users can listen without needing to download it.

When not to use audio blocks

Avoid using audio blocks if the information is essential but not available in another format. Not all users can or want to listen to audio. Do not use audio for decoration or as the only way to communicate critical information.

General enquiries block

Place the block at the end of a page or section, once users have had a chance to read the content and try to solve their problem. Keep the wording clear and supportive, for example “If you can’t find what you’re looking for, contact us.” Provide multiple contact options where possible, such as email, phone, or a web form, so users can choose what works best for them.

YouTube Block

A YouTube block lets you embed a YouTube video directly on a page, so users can watch it without leaving the site.

When not to use YouTube blocks

Do not use a YouTube block if the video contains essential information that is not also provided in text. Not all users can or want to watch video. Avoid embedding long or unrelated videos, as they can distract from the main content.

Timeline Block

A Timeline block lets you add a timeline on a page, so users can see a timeline of major and minor events.

Statistics Block

A Statistics block lets you add a figures on a page, so users can see data and supplementary information.

Google Maps Block