HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
When not to use
Anatomy
Best practices
Placement
Format
Behavior
Things to avoid
Variants
Dismissible info banner
Dismissible critical banner
Persistent critical banner
Dismissible warning banner
Persistent warning banner
Do’s and don’ts
Templates

Global Banner Notifications

Global Banner Notifications are system generated alerts that attract user's attention to system conditions and updates.

HPE Service Name
JS
Your supscription will expire in 7 days. Renew your subscription to ensure you don't lose access.Renew Subscription

Page Header

1
2
3
4
5
6
An example of a dashboard with a Global Banner warning the user that their subscription is expiring. The user can either dismiss the notification or click on the anchor to renew their subscription.

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

1
2
3
4
Banner message goes here.
Link
Diagram illustrating the four parts composing of a Banner Notification.
  1. Status Indicator is an icon made of a shape and color to capture the user’s attention.
  2. Message is a short description explaining the issue.
  3. Anchors (optional) are used to direct users to links related to the notification.
  4. 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

Dismissible info banner

Some possible use cases are when new features are available or a new release is coming. Informational banners should be dismissible.

Updates to this service will be available soon including feature a, b, and c.View more

Dismissible critical banner

One possible use case is scheduled maintenance. A critical status should be used and the notification should be dismissible.

Scheduled maintenance will begin at 12:00am UTC on 02/17/2022. The platform will not be accessible.

Persistent critical banner

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.

This service is currently unavailable. We are working on getting things fixed.

Dismissible warning banner

One possible use case is when subscriptions about to expire. A warning status should be used and the notification should be dismissible.

Your subscription will be ending in 7 days (03/03/2022).Renew

Persistent warning banner

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.

Your session has timed out due to inactivity.Refresh

Do’s and don’ts

Your subscription will be ending in 7 days (03/03/2022).Renew
Do

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.

Your subscription is expiring in 7 days. Access to features a, b, c, and d will be restricted starting on 03/03/2022.Renew Compare subscription plans View more
Don't

Overloading notifications with long messages and anchors can lead to clutter and confusion.

Related

Related content you may find useful when using Global Banner Notifications.

Image featuring a bell icon and indicator representing how a timely notification 
        might be presented to a user within an application.

Notification

Notifications deliver clarity for information related to tasks or system statuses that the user should be made aware of.

Nearing your allotted budget.

Inline Notifications

Inline notifications help application users by delivering timely, contextual information and feedback related to their actions.
Hooray. Your toast is done!

Toast Notifications

Toast notifications are used to communicate low severity level information to users in an unobtrusive way.

Status Indicator

Quickly provide peace-of-mind or call attention to items requiring a user's action.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page