Info Banner

Info banners highlight important information for travellers.

Info banners add emphasis to important messages throughout the user journey. There are different types of info banners for different types of messages.

Info Banner overview


Info Banner anatomy 01

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.


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.



The info banner is for low-priority information and is relevant to the user’s journey.


The success info banner is for when a user has completed an action successfully.


The warning info banner is for high-priority information that could affect a user’s travel or experience.


The error info banner is for when a user has entered incorrect information and they can’t progress any further.


Info Banner styles


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.


Info Banner kinds


The default kind is a non-interactive inline alert with no accessories.


The drop-down kind has an open and closed state. The open state is for additional text.


The dismissible info banner sits in line with the page content and can be dismissed. Once dismissed this can’t be retrieved.



Info Banner states


Closed is the default state if there’s no accessory.


The open state is for the dropdown type.


Icons are used as a visual representation of the message. They are for default or success.

Info Banner states

For warning and error messages we recommend the following icons.