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