Is documented
The component is fully documented
Healthy
Show details
Design
The announcement banner sits below the primary header navigation within Iterable.
Properties
- Link (optional): A link to more information about the announcement
- Button (optional): A button if an action is required to be taken due to the announcement
Guidelines
- Sits underneath our Navigation | Global Navigation
- 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
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
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated
Healthy