Call-out box guidelines

Use these guidelines to create a call-out box on your web pages.

The call out box is designed to draw the user's attention and the special formatting will help important messages stand out.

You should use this component rarely. Using it too much will diminish its impact on the page.

Example

Example of the call out box style:

Title goes here

Call out boxes emphasise a section of content. Your call out box can be used to highlight:

  • links
  • instructions
  • statistics, facts and figures
  • and more!

Example of the call out box lite style:

'Call out box lite' is another style that can be applied to your call out boxes that outlines the right and left borders of your call out box.

Use this call out box style sparingly for alerts, disclaimers or instructions in the middle of your content rather than at the start or end of the page.

Where you can use them

How to use them

Do

  • Use for a call to action - when you want your user to do something.
  • Use to highlight new information or changes.
  • Use for contact details.

Don't

  • Use it more than once on a page.
  • Use it for large blocks of text.
  • Use them on a page full of show/hides.
  • Bold all the text in the box.

Features

  • You can insert headings, text, links and bullets in your call out box.
  • It can be located anywhere on the page but it is best to use it at the bottom of the page. If you use it at the top, content underneath could be missed.

How-to guides

Learn how to add a call out box to your page with our guides:

Return to top of page Back to top