Highlighted box

The highlight box uses a teal background to draw attention to important supporting information that enhances user understanding.

It emphasises extra insights, examples or context without requiring immediate action.

Use highlight boxes when you want users to notice and consider information that adds value to the surrounding content.

Use highlighted boxes when you need to:

• emphasise important insights or lessons that support the main page content
• present case studies or examples
• highlight key points, best practices or tips
• draw attention to important context or background information
• show relevant data or research findings that inform decisions
• present summary information users might want to reference later

Avoid the call to action box for critical information or when other components are more appropriate.

Use a notification banner instead when:

• information requires user action
• you’re confirming a completed action or process

Use inset text when:

• information is important to user success
• content directly affects the user’s current task

Use body text when:

• information flows naturally within the main narrative, or is a part of the guidance
• content doesn’t need visual emphasis

Always include a clear heading within the highlighted box (unless it’s a note box) that explains the content’s purpose. Good examples include ‘Key points’ ‘Example: ‘ or ‘Best practice’.

Make sure the heading level fits logically within the page hierarchy.

Ensure highlighted content directly relates to and enhances the main guidance rather than introducing tangential information.

The reference note box has a gray background, rather than a teal background. Use this variation for notes, references or less important information that provides context that isn’t directly relevant to the page content.

This is a note box.