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.