Top Notification The Top Notification component displays concise announcements at the very top of designated pages, ensuring high visibility on first load. It supports plain text and inline links, separated by a clear divider between each item for easy scanning.
  • Use Cases: Used to surface announcements at the very top of pages. Items can include short text and inline links, with a divider separating each snippet for quick scanning.
  • Dependencies
    • None required. The Top Notification is fully self-contained and does not rely on child items or external data sources.
  • Title and Link: Title and Link can be provided in the the Content Editor
Label only Top Notification
Label with Link Top Notification
Creating a Top Notification
  1. In Content Editor, create a "Top Notification" under the Global folder\Header of MarketSharedContentFolder for your website
  2. Create a new Top Notification item from the Navigation NavBar template
  3. Create a sub item under Navbar using NavRoot template
  4. Fill in the required fields
    • Label
  5. Fill in optional fields: Link
  6. In Experience Editor, insert the Top Notification rendering into the awt-header-top placeholder.
  7. Associate the Top Notification item as the data source created using NavBar template.
  • Normal: Title and Link on top of the page
  • Color and NoModal fields has no impact in this component
  • BackgroundColor and TextColor should be set in theme file for this component
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: Top Notification