Info banners add emphasis to important messages throughout the user journey. There are different types of info banners for different types of messages.
Anatomy
Leading icon
The leading icon is situated before the headline copy indicating the type of info banner. It should always relate to the style of content/message included.
Headline
The headline is for the main message. This should be the overarching sentiment of the info banner.
Accessory (optional)
There are two optional accessories for the info banner; the drop-down accessory, which opens to reveal more copy with an optional action link, or the close accessory which permanently dismisses the banner from the interface.
Body text (optional)
The drop-down accessory opens to show additional content. Copy can be formatted in any way and has an unlimited character count.
Call to action (optional)
The optional call-to-action link can be added underneath the body text.
Types
Info
The info banner is for low-priority information and is relevant to the user’s journey.
Success
The success info banner is for when a user has completed an action successfully.
Warning
The warning info banner is for high-priority information that could affect a user’s travel or experience.
Error
The error info banner is for when a user has entered incorrect information and they can’t progress any further.
Styles
Default
The default style is for when the page canvas is Canvas default.
On contrast
The contrast style is for when the page canvas is Canvas contrast.
Kinds
Default
The default kind is a non-interactive inline alert with no accessories.
Drop-down
The drop-down kind has an open and closed state. The open state is for additional text.
Dismissible
The dismissible info banner sits in line with the page content and can be dismissed. Once dismissed this can’t be retrieved.
States
Closed
Closed is the default state if there’s no accessory.
Open
The open state is for the dropdown type.
Icons
Icons are used as a visual representation of the message. They are for default or success.
For warning and error messages we recommend the following icons.
