Core Content and Layout

These blocks are useful for building the main sections of a page. Follow the animation guidance whenever you turn on a block's animation setting.

#Accordion

Use an Accordion to group questions, policy links, or other details that people can open when needed.

Set: the section heading, each accordion item's title and text, optional image, optional button, and display/animation settings.

Basic Content - Image

Use this block for a standalone image, with an optional caption or link.

Set: image, alternative text, caption, image style, and (if needed) link details and animation.

Content

Use Content for a flexible text section with an optional heading and buttons.

Set: heading, heading size, text, buttons, and animation.

Horizontal Rule - HR

Use a Horizontal Rule to create a visual break between sections.

Set: spacing and display options.

Media

Use Media to show an image, Vimeo video, or YouTube video.

Set: media type, image and alternative text or video ID, aspect ratio, and border shape.

Section Header

Use a Section Header to introduce the content below it.

Set: eyebrow text, heading, supporting text, alignment, optional button, and animation.

Social Share Buttons

Use Social Share Buttons where readers should be able to share a story or page.

Set: the sharing text and display options.

Spacer Component

Use a Spacer only when the standard gaps between sections need adjusting.

Set: normal or large spacing, or a custom amount.

Split Media & Content

Use this block for a side-by-side image or video with text and optional buttons.

Set: text, media, media position, panel width balance, panel style, background colour, buttons, and animation.

Error

Use Error for a simple message with an image when a page cannot be found.

Set: message, image, and alternative text.