Website elementsOffers & conversion
Announcement bar
An announcement bar, built into your site with no plugin and no library. One line above the header (or at the end of the page) with an optional link, a dismiss that is remembered, a from/until window and a countdown in the business’s time zone. In the document flow, settled by an inline script before the first paint, so it causes no layout shift; a dismissal collapses it once, on the visitor’s action.
You'll need to give us
- The announcement, in one lineNeeded to start
- When it should start and stop showingLeave it open if it stays until you say. Give the time zone for a time of day.
- Where it should link, if anywhere
Send these with your request and we can start straight away. Everything else is ours to do.
One line across the top for the thing that matters this week — with a date it stops itself, and a dismiss that stays dismissed.
Also called
PowerPack Announcement BarHello Barnotification bartop barpromo barsticky barWP Notification Bar
What it replaces
- PowerPack announcement bar
- Hello Bar
- WP Notification Bar and top-bar plugins
Good for
Something true for a while and then not: holiday hours, a sale with an end, a launch, a closure, a change of address. Give it `until` or a `countdown` and it takes itself down on time, in the business’s time zone, with no one editing the site.
Not for
Permanent content: a phone number or a tagline that is always there belongs in the header. Two bars stacked on one page: say the one thing. A rolling list of headlines is news-ticker. And a sticky bar by default: a bar that follows the reader down the page covers content on a phone; ask for sticky when it earns it.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- A region (role="region") named by its own text, or by `label`. The link is a normal link.
- The dismiss button is a real 44px <button> named “Dismiss announcement”. After a dismiss, focus moves to the next focusable thing on the page, not to nowhere.
- The countdown is a <time datetime> with the absolute end, and deliberately not a live region: it changes every minute and should not be read out each time.
- The fallback colors of all three themes clear 4.5:1 (7.27, 14.75 and 12.92 to 1); `npm run check` computes them.
- prefers-reduced-motion: a dismissed bar disappears at once instead of collapsing.
- Without JavaScript the bar shows when the build put it inside its window, the countdown gives the end date instead, and it cannot be dismissed: the button stays hidden rather than doing nothing.
Where it's live
- superherotech.ai: /elements/announcement-bar/ (demo)
How to ask for it
“The announcement-bar on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Offers & conversion
See them all working- Countdown
Show exactly how long is left — to the end of a sale, the start of an event or today’s order cut-off — in your time zone, not the visitor’s guess.
- Content toggle
Let visitors flip between two versions of the same thing — monthly or annual prices, homes or businesses — without leaving the page.
- Sticker
Mark the sale, the new arrival or the last few in stock right on the photo, where shoppers look first.
- News ticker
Keep your latest news, offers and events turning over in one slim strip, so visitors see what is new without a banner shouting at them.
Want the announcement bar on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.