Content blocks

Usage

Use content blocks to present related information and actions in a scannable layout, so users can quickly understand options and decide where to go next.

Do

• Use content blocks when users need to compare multiple pathways, topics or actions at the same level.
• Use content blocks when content includes in-line links or multiple related links that users may need to explore.
• Keep each block focused on one clear topic, with a headline and short supporting copy.
• Give enough information for context, then link to deeper detail rather than trying to explain everything in the block.
• Use sentence case for headlines and links, and keep language plain and specific.
• Keep copy concise, usually one or two short sentences, and use parallel structure across blocks so users can compare options quickly.
• Use descriptive link text so users understand what will happen before selecting a link.
• Use pictograms or images only when they add meaning and help users distinguish between topics.
• Test with minimal content first, then add details only when they improve comprehension.

Don't

• Do not use content blocks for a single call to action. Use the Card component when one primary action is enough.
• Do not use content blocks as a generic container to group related content. Use the Card component where grouping is the main purpose.
• Do not overload blocks with long paragraphs, repeated links or decorative visuals.
• Do not use visuals that are ambiguous, difficult to interpret or unrelated to the content.
• Do not rely on visuals alone to communicate meaning or priority.
• Do not use unexplained acronyms or internal terms that may be unclear to cross-agency teams.

Variants

Choose the content block type based on how much visual support users need:

• Text block: Use when text and links are enough to guide users.
• Pictogram block: Use when a simple pictogram helps users scan and differentiate topics quickly.
• Image block: Use when a contextual image adds meaningful information that supports decision-making.

Behaviour

User interaction

Content blocks are not a single clickable surface. Links within each block use standard text link styling to indicate interactive elements.

Content strategy

Users scan content blocks quickly, so headlines should be brief and explicit, copy should be concise, and links should be prioritised by user need.

Use pictograms or images only when they clarify the topic and help users distinguish between options, not for decoration.

Accessibility

Content blocks should meet Web Content Accessibility Guidelines (WCAG) 2.2 AA requirements when implemented correctly.

• Ensure all links are keyboard accessible and receive a visible focus indicator.
• Use descriptive link text that makes sense out of context.
• Provide meaningful alt text for informative images. Use empty alt text for decorative images only.
• Do not rely on colour or imagery alone to communicate meaning.
• Check text and icon contrast across default and inverted themes.