Search blocks by description or jump to a page.
A sticky header with a primary announcement bar and arrow link above a frosted navbar with centered links and dual CTAs.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Announcement Bar Nav stacks two bars into one sticky header. The top strip uses the primary color to carry a single short update, here a release note, with an arrow link that invites a click. Beneath it sits a frosted glass navbar: a square brand mark and wordmark on the left, four navigation links optically centered in the middle, and a ghost "Sign in" button beside a solid pill shaped "Get started" button on the right.
On narrow screens the centered links and CTA buttons give way to a hamburger icon that opens a sheet from the right edge of the screen. The sheet repeats the brand, lists the same links as tall touch targets, and stacks both action buttons at the bottom. The announcement copy, its link label, the nav links, and the button text are all plain strings you can swap without touching the layout.
Reach for this header when there is one thing the whole site should announce: a major release, a funding round, an upcoming webinar, or a launch offer. Pairing the loud primary strip with a quiet glass navbar lets the announcement own the first glance while navigation stays calm and familiar. It works especially well for a product that ships visibly and often, where the bar doubles as ongoing proof of momentum.
A natural flow around it on a Marketing Pro page:
Before
After
The announcement strip is a general purpose slot for one line of news. A few ways to use it:
Tip: keep the announcement to a single sentence that survives truncation on mobile. If the message needs a second clause, move the detail to the destination page and let the strip carry only the hook.