Dismissible Announcement Bar
A slim dismissible top of page bar on a primary background with an uppercase New tag, a one sentence message, an arrow link, and an X button.
A slim dismissible top of page bar on a primary background with an uppercase New tag, a one sentence message, an arrow link, and an X button.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Dismissible Announcement Bar is a slim strip that sits above everything else on the page. It uses the primary color at full strength so a single line of news stands out against the rest of the chrome: a tiny uppercase New tag, one short sentence, and an arrow link that carries the click. An X button on the right lets visitors dismiss it, and a small piece of client state hides the bar for the rest of the visit.
The three pieces of content are independent, so you can swap the tag text, the message, and the link without touching the layout. The bar is intentionally not sticky; it scrolls away with the page so it never competes with a sticky navbar below it. Because the message stays centered, the bar reads cleanly at any width, and the dismiss control keeps its spot on the right edge.
Reach for this block when something is genuinely new and time bound: a feature launch, a changelog milestone, a webinar date, or a limited offer. A project management tool shipping its automation engine, for example, can run this bar for two weeks so every returning visitor sees the news once, follows the link if they care, and dismisses it if they do not.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a product launch headline. A few other ways to use the frame:
Tip: keep the message to one sentence that fits a single line on desktop. If you need a second clause, move it behind the arrow link instead of letting the bar wrap.