UI components · Alerts
Announcement Banner
Also called: Announcement bar, Notice bar, Top banner, Site banner
A thin full-width strip at the very top of a website (above the navbar) for announcements everyone should see, like a new feature, a limited-time sale, or scheduled maintenance. It can usually be closed.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd an announcement banner above the site's top navbar: full width, 40px tall, brand color #3B5BFF background with white text, content centered: "🎉 The new editor is live, with real-time collaboration," followed by an underlined "Learn more →" link. On the far right, a 32px ✕ close button (aria-label="Close announcement"). When closed, save the announcement ID in localStorage so the same announcement doesn't show again. Read the content and start/end times from config, and hide it automatically once it expires. The banner isn't sticky and scrolls away with the page, while the navbar stays sticky as usual. On phones, truncate long text to one line and expand it on tap. Also prepare a maintenance style: yellow background, dark text, an exclamation icon on the left, and no close button.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Announcement Banner is what you need.
Use Announcement Banner when
- Site-wide news like a new feature, a version update, or a limited-time sale
- Scheduled maintenance or service outages that affect every user
- Account states that need a reminder on every page, like a trial about to end or an overdue bill
Pick something else when
States that only concern the current page or block (form errors, unverified email)
Use insteadAlertThe big headline and call-to-action on a landing page's first screen
Use insteadHero SectionFeedback on an action that just finished
Use insteadToast
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Three or four announcements stacked at the top, pushing the navbar and content into the bottom half of the screen
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
It comes back on every reload after being closed, or there's no close button at all
- 03
The campaign ended long ago, but the announcement is still hanging at the top of the site
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
One thin full-width strip with an optional icon, one sentence of announcement text, a link or button, and a close button on the right, placed above the navbar or right below it.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
An announcement banner is a strip across the full width of the screen, only 36 to 48px tall, sitting above the navbar (or right below it) and visible on every page. It holds one sentence plus a link or button, like "🎉 The new editor is live, see what's changed →," "Summer sale, 20% off everything, 2 days left," or "Scheduled maintenance tonight 10 PM–12 AM, checkout unavailable," with an ✕ close button on the right. Marketing banners use the brand color, while maintenance and outage notices use yellow or red. On phones it's often a notice bar with scrolling text.
How it differs from an Alert is scope. An alert sits inside one page or one block and describes the state of that spot ("Email not verified," "3 errors in this form"). An announcement banner is site-wide, unrelated to the current page, and the same on every page. It's also not a Hero Section. Both get called a "banner," but a hero is the big headline, big image, and buttons that fill the first screen of a landing page, while an announcement banner is one line tall. And it's different from a Notification, which pops up in a corner as a new message and disappears after a few seconds. An announcement banner stays at the top of the page until the user closes it or the campaign ends.
Show only one at a time, keep it to one line, and use at most one link. Remember when it's closed (in local storage or account settings) instead of bringing it back on every reload, and take it down automatically when the campaign ends. It pushes the whole page down, so if it's sticky, count its height together with the navbar and don't cover the navbar. Make it stand out, but keep enough contrast between text and background, and give the close button an aria-label.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-banner- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-alert-banner.arco-alert-banner.semi-banner.van-notice-bar.adm-notice-bar.nut-noticebar.t-notice-bar
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
announcement-barannouncement-bannerannouncementnotice-barnoticebartop-bannersite-bannerpromo-bannerpromo-baralert-banner
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
AnnouncementBarAnnouncementBannerNoticeBarTopBannerPromoBannerSiteBanner
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
sticky top
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026