Global Banner Notifications
Global Banner Notifications are system generated alerts that attract user's attention to system conditions and updates.
Page Header
When to use
Global banners are high-attention notifications used primarily for status updates on background processes and upcoming system changes and releases.
Global banners are used to showcase warning and critical statuses or informational alerts. Depending on the severity of the information, they may remain persistent across multiple sessions or be dismissible by the user.
When not to use
- Completion of tasks, such as long running or batch actions.
- Success or failure confirmations.
- Low-attention and low-severity information.
For low-severity notifications that do not require user action or user attention such as confirmation receipts, instead use Toast Notifications.
Anatomy
- Status Indicator is an icon made of a shape and color to capture the user’s attention.
- Message is a short description explaining the issue.
- Anchors (optional) are used to direct users to links related to the notification.
- Close Button (optional) is used to dismiss the notification.
Best practices
- Since Global Banners take over the top of an interface and can be intrusive, they should be reserved only for important system generated updates.
- Also when applicable, Global Banners should always have a relevant anchor(s) to direct users to further actions or to view more about the issue in full detail.
- Do not use
onClose
when information is important and needs to remain persistent. Also, global banners may remain persistent across multiple sessions until they are dismissed.
Placement
- Always located directly below the Global Header without a gap and should be implemented inline with content so no content or actions are obscured.
- Can persist across multiple sessions until dismissed if necessary.
Format
- Only show one banner at a time.
- Global Banners should stay within the 192 character limit.
- Long text is not truncated but instead will wrap on smaller screen sizes.
- Anchors are left-aligned and will wrap alongisde the text.
- Use only two or fewer anchors.
- Utilize writing guide to stay within character count as well as the writing effective content guidance for appropriate language.
Behavior
- Never sticky and should scroll when there is other content.
- The background spans the full width of the screen, but the content resizes alongside the Global Header.
Things to avoid
- Global Banners are not clickable. Instead use anchors to direct users to take further action or to view the issue in full detail.
- Do not allow messages to exceed 192 characters.
Variants
Some possible use cases are when new features are available or a new release is coming. Informational banners should be dismissible.
One possible use case is scheduled maintenance. A critical status should be used and the notification should be dismissible.
One possible use case is when platform access is unavailable due to the system. A critical status should be used and should not be dismissible.
One possible use case is when subscriptions about to expire. A warning status should be used and the notification should be dismissible.
One possible use case is a session timeout. A warning status should be used and should not be dismissible. The notification should also contain a relevant anchor to refresh.
Do’s and don’ts
Global Banners should always have an anchor (or anchors) that is relevant to resolving the notification. It is not recommended to use more than two anchors. Also, low-severity notifications should be dismissible.
Overloading notifications with long messages and anchors can lead to clutter and confusion.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.