Overview
A global alert displays a prominent message at the top of the screen. Global alerts bring a user’s attention to a significant situation, such as a sitewide service disruption or other critical information.
Global alerts appear above the global header bar and apply to the entire site.
Be mindful of the amount of content in a global alert. Tthey can significantly impact the visibility of other content, especially on smaller mobile screens. Use a link to direct users to further information if needed.
Best practices
Do:
- Write concise headings and copy, with a maximum of 140 characters.
- Cconsider how the global alert will appear on mobile screens.
- Post global alerts temporarily, and only for the duration of the crisis.
- Describe the impact on the user.
Don't:
- Stack global alerts. Only use one global alert at a time.
- Use global alerts for styling regular content.
- Use more than one link.
Formatting
Anatomy
- Container
- Icon: Along with the color styling, the icon indicates the type of alert.
- Heading
- Body copy
- Call-to-action link
Variants
Global alerts have a semantic meaning and use semantic colors to help indicate the level of urgency. The options include gray (neutral), yellow (warning), and red (critical). The icon also changes across different variants.
Which variant to use
Status | Usage | Color | Icon |
|---|---|---|---|
Neutral | Important, time-sensitive information. For example, important dates, recent content updates, new policies, or system notifications. | Gray | ri-information-line |
Warning | Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings or location closures. | Yellow | ri-alert-line |
Critical | Critical alerts should only be used for active emergency situations that could pose a health or safety risk. For example, severe weather threats or natural disasters. | Red | ri-error-warning-line |
Behavior
Global alerts are not sticky. They should scroll with the other content on the page.