Highlight block

A highlight block is a container to let certain content standout on a page.

When to use

A highlight block has the sole purpose, as the name suggests, of highlighting specific content on a page to make it stand out and grab the user's attention.


Although it might seem comparable to a notification, a highlight block serves its own purpose. A notification has a fixed configuration and is meant to inform users about changes or updates, or to communicate a status based on user data. A highlight block, however, is a flexible component that can house any content such as text and/or images, and therefore has a flexible nature and a more general purpose, not necessarily connected to input by a user.


Placement

A highlight block occupies the full width of the containing element. For example, when used on a content page, it occupies the same space as the content before or after the highlight block.


Accessibility considerations

  • Ensure that the content placed in the container still exceeds minimum contrast guidelines
  • Colour alone should not convey meaning. For example: a red background doesn’t convey meaning unless the content within conveys that message