When to use this component
Use a notification banner to tell the customer something they need to know to use the service. For example, the information they should know before applying, disruptions to a service, or content that is important to read on another page.
The notification tooltip should be used sparingly, it is less effective when it is overused. User research has shown that customers often miss them when they are quickly scanning a page, so using them too often is likely to make this problem worse.
Notification types
There are 3 options in the Notification tooltip:
- Important – a red text box
- Information – a blue text box
- Inset text – a grey box with a side border
Important
Use the Important notification to highlight key information the user will need to complete a transaction.
Information
Use the Information notification to tell the customer about service disruptions.
Inset text
Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
- examples
- additional information about the page