Studio Nope - Announcement Bar

A premium announcement bar module with dismiss memory, countdown timer, rotating announcements, and complete style control. Announcement Bar Pro gives you a sticky or fixed notification bar for promotions, product launches, maintenance alerts, and any message that needs attention at the top or bottom of your pages.

Configure a single persistent message or rotate through multiple announcements with automatic transitions. Add a countdown timer with customizable labels for flash sales and limited offers. Set the bar to static, sticky, or fixed positioning with a configurable offset from the edges. Enable dismiss with localStorage memory so returning visitors see the bar only after your configured duration.

Five color presets provide instant theming for common use cases: info (blue), success (green), warning (orange), promotion (purple), or fully custom. Every preset can be further refined since all other style fields still apply on top of the preset background.

Content supports a title with optional subtitle, icon from the HubSpot icon picker with optional colored background wrapper, link styled as a text pill or filled button, countdown timer, and a dismissible close button. Rotating mode cycles through up to 10 announcements, each with its own text, link, and icon.

The Style tab provides full control over every element. 15 color fields cover bar background, text, subtitle, link with separate default and hover colors for both text and background, dismiss button colors, countdown colors, icon and icon background, and border.

Typography includes a Google Font picker, separate size and weight controls for title, link, countdown, and dismiss, plus text alignment and letter spacing. Layout controls cover element gap, link padding and radius, countdown padding and radius, dismiss button size, icon size with padding and radius for the wrapper, bar shadow with four levels, bar border radius, z-index, and position offset. Responsive settings include a mobile breakpoint, font size override, and stack toggle. On mobile the bar stacks vertically with the dismiss button positioned absolute top-right.

The bar renders as two layers: the outer element handles full-width background, shadow, radius, and positioning, while the inner container centers content at a configurable max-width. When border radius is set with a max-width, the bar becomes a floating card that stays inset from the viewport edges on all screen sizes.

Zero external dependencies. Vanilla JavaScript handles dismiss with localStorage, countdown timer updates, and announcement rotation. All CSS scoped per instance for multiple bars on the same page. Accessible with role="banner", aria-label on the bar, and proper button semantics on dismiss.

Works on any HubSpot template with no theme required.