Best practices
Banners provide general updates on background system status or out-of-context events and information, not a specific task. They are initiated by the application or system, independent of user action. Never show more than one banner at a time and do not cover other content with a banner.
When to use
- When displaying high priority, surface-level information to the user.
- When providing persistent, non-blocking feedback.
- When communicating updates to the state or status of the surface.
When not to use
- When displaying information that is intended for promotional/marketing purposes.
- When interacting with the banner is required for the user to proceed with a task or flow. Use Modal instead.
Anatomy
- Optional icon
- Message
- Optional link
Behaviour
Banners are not sticky and should scroll with the other content on the page. They are not dismissible, and only disappear when no longer required. Banners animate into a screen by pushing the entire content below down.
Responsive behaviour
Full width on all screen sizes and centred content on desktop. The mobile version has optimised text and icon size and its’ content is aligned either left or right.
Placement
Directly above the main header section and always the first element on the page, separate from the rest of the page
Content guidelines
Banners provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.
Use language that is accessible to the user and that will be easily understood. Use a tone that is appropriate for the situation and banner.
- Text is limited to 80 characters
- Use only icons relevant to the message
- Avoid using more than one link