Banner

Banners display an actionable message used as a prominent way of communicating with your users.

• Appearance: Banners are used to display different types of messages and it’s important to differentiate their visual appearance based on the role they’re playing. If you’re using background colours for role differentiation, make sure there’s enough contrast ratio with the content according to the WCAG AA standard.
• Area for icons or images: Banners can supplement their message using a supporting icon or image. They shouldn’t be used instead of text content.
• Actions: Actions in banners should relate to its text and provide a way to react to the message sent to the user.
• Dismissible Action: Don’t overwhelm the user with banners on the page and include a dismissable action. That may be either a separate close button or one of the actions provided.
• Accessibility: If a banner dynamically appears on the page, it should be announced to the user by their assistive technology.
• Responsiveness: Banners should adapt to the viewport size. This usually means that they become full-width for mobile to save some space.