May appear on all pages or just the pages where the announcement affects
Only one global announcement banner should be used at one time, unless under special circumstances. If a second announcement is required, it should stack with the most recent announcement at the top.
Consider using an in-app message through Pendo, or a system-generated notification if multiple messages are needed.
Use cases
Global announcement
Used to alert customers that the current UI (classic Studio) is sunsetting
Used to indicate high-level status of the current page/feature (Predictive Goals within a project)
Do
Use simple, human language that is scannable
Include links to further documentation if available
Don't
Don’t use lengthy lines of text, keep it concise and scannable
Don’t include multiple links
Don’t include multiple buttons
Don’t have multiple announcements displaying at once or stacking on one another
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova