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.

 

Announcement vs. Banner: When to Use Which

The core distinction

Announcement is a global, product-level message. It lives above the page content, just below the primary navigation, and speaks to users across the entire app or a broad set of pages. Use it when Iterable (the product team) needs to communicate with the user, not when the page or system needs to respond to user actions.
Banner is a contextual, in-page message. It lives within the page layout, at the top of the page or a specific section, and is directly tied to the user's current context or actions. Use it when the page or system needs to respond to something — a state, an error, a warning about a feature.

---

Announcement

Best for:

• Product or business communications that originate from Iterable — sunset notices, scheduled maintenance, new feature launches, or major policy changes
• Messages that may need to appear across all pages simultaneously, or across a targeted subset of pages where the announcement is relevant
• Situations where a single, prominent message needs persistent visibility until the communication period ends

Key constraints:

• Only one announcement should run at a time under normal circumstances. If a second is truly needed, stack them with the newest on top — but prefer Pendo or in-app notifications if multiple messages are needed
• No lengthy copy; keep it scannable
• Can include one optional link and/or one optional button — not multiples of either
• Does not support semantic variants (info, warning, error) — it's a neutral, brand-level communication surface

---

Banner (page-level)

Best for:

• System-generated or state-driven messages that are directly relevant to what the user is looking at or doing — deprecation warnings, form errors, permission limitations, feature-level status
• Communicating that something about the current page's state requires attention or action
• Messages that need semantic weight: use info for neutral context, warning for potential consequences, error for blocking issues, success for confirmations

Key constraints:

• Scoped to the page or section it appears in — not a global surface
• Make it dismissible unless the message is critical or requires action to resolve
• Use the subtle variant for messages that always persist in the UI; use the default variant for temporary or conditional messages
• Limit to one banner per page; never stack multiple banners in the same container
• Prefer Toast for transient feedback tied to a specific user action (e.g. "Saved successfully")

---

A note on the pattern

Avoid using Announcement as a page-level status strip — a full-width bar that sits above the page content to describe the state of whatever is on that page. The fix, in most cases, is a page-level Banner (a warning or info variant) that is purpose-built for exactly this.
The deciding question at design or build time: Is this message about the product broadly, or about this page specifically?

• If Iterable is informing users about a product-wide change → Announcement
• If the page or system is surfacing a state the user needs to know about in their current workflow → Banner

When in doubt, ask: Does this message require semantic urgency (warning, error, info)? If yes, it's a Banner. Does it need to appear simultaneously on pages where the feature isn't even present? If yes, it's an Announcement.

Health