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.