Announcement bar
A full-width strip at the top of a page for a short sitewide message, often with a link and close button.
See it
What it is
An announcement bar is a full-width strip at the top of a page for one short, broadly relevant message. Online stores often use it for free shipping or a sale deadline; products use it for maintenance notices, policy changes, or a newly available feature.
Reach for one when the message applies to most visitors and should remain visible as they orient themselves. It is calmer and more persistent than a toast, but less disruptive than a modal dialog. A single link or action can sit beside the copy.
Gotcha: inserting the bar after the page loads causes layout shift, and forgetting a dismissal makes repeat visits irritating. Reserve its space from the first render, remember dismissal for that specific message, and use role alert only for genuinely urgent updates. Routine promotions can use role status or plain landmark content.
Ask AI for it
Build a full-width dismissible announcement bar above the site header for a scheduled maintenance message. Include concise copy, one 'View status' link, and a close button with an accessible name. Render the bar in the initial layout to avoid Cumulative Layout Shift, use role="status" without moving focus, and keep it visible with position: sticky and top: 0. Store dismissal in localStorage under a key containing the announcement ID so a future message can appear again. Give the bar and header coordinated z-index values and use a 150ms opacity transition that respects prefers-reduced-motion.