Announcement

A full-width, top-level banner used for communicating important announcements.

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 20, 2024

Design

The announcement banner sits below the primary header navigation within Iterable.

 

🟢 Announcement

 

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
Button

Button

Link

Link

Button and link

Button and link

 

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 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)

Used to indicate high-level status of the current page/feature (Predictive Goals within a project)

  • Use simple, human language that is scannable
  • Include links to further documentation if available
  • 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

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy