Highlight

Highlights make important information stand out.

When to use a highlight

Use a highlight when you need to make important information stand out. For example, when you need:

  • users to take a specific action
  • to warn users about an issue
  • to share an essential update
Example Open in a new tab: highlight

Use a highlight when you need to make important information stand out.

 
<div class="highlight highlight-info">
  <p>Use a highlight when you need to make important information stand out.</p>
</div>

When not to use a highlight

Use highlights sparingly. Banner research by Nielson Normal Group suggests that users ignore them when overused.

Do not use a highlight if you need to convey a lot of information. Instead, add the information within the main body of the content.

How to write good highlight text

Highlight text should be short and descriptive. Aim for between one and three sentences to keep it impactful and relevant.

Other types of highlight

Other types of highlight are available in the code base and these are listed below. If you’re using any of these, please replace them with the highlight above.

  • Neutral
  • Warning
  • Error
  • Success

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.