Announcement Ribbon

A slim ribbon that cycles through 2-3 short messages. Pauses on hover, never jiggles the page.

Copied 0 times.

Free returns within 30 daysDetails×

Customize the prompt

Build an announcement ribbon for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A slim full-width ribbon, about 36-40px tall, one line of centered text with an optional inline link per message, and a small dismiss X at the far end.
- Place it at the very top of the page, above the header, in the normal document flow (it scrolls away with the page).

MESSAGES
- Messages live in one config array (text, optional link label, optional URL). Render only messages I actually filled in; an empty array = the ribbon does not render. Never invent announcements.
- Cycle through the configured messages (2-3 recommended) every 5 seconds with a quick crossfade (200ms). Pause the cycle on hover and on focus, and while the tab is hidden. With a single configured message, do not rotate at all.

BEHAVIOR
- Dismiss X hides the ribbon for the rest of the session (sessionStorage flag).
- The ribbon reserves its own space in the layout (it is part of the flow or its height is padded for): zero layout shift on load, on rotation, and on dismiss (animate the collapse, 200ms).
- Messages longer than the available width truncate with an ellipsis on small screens; the link stays visible.

QUALITY
- High contrast: ribbon background from my brand palette, text meeting WCAG AA contrast.
- role="region" with aria-label="Announcements". Rotating text uses aria-live="polite" so screen readers hear changes without being spammed; rotation pauses while any element inside has focus.
- Respect prefers-reduced-motion: with it set, swap messages with a plain fade or no animation at all.
- Links inside the ribbon are real anchor tags, keyboard-reachable, with a visible focus style.

QUESTIONS
- Before you build, find or ask for: the real announcements to show and the URL each one links to. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

What it does

The announcement ribbon is the slim strip along the edge of your site that carries the news: free returns, a holiday closing, a fresh drop. It can hold one message or quietly cycle through two or three, each with its own little link.

  • The rotation pauses the moment someone hovers to read.
  • The page never jiggles when messages swap, appear, or get dismissed.
  • The X tucks it away for the rest of the visit.
  • Messages live in one list; empty entries never render, and an empty list means no ribbon.
  • Less-motion visitors get a plain swap; screen readers hear changes politely.

How it works

  1. 1Choose one static message or a cycle that swaps every 5 seconds with a soft crossfade.
  2. 2Pick where it lives, at the very top above your header or pinned to the bottom of the screen.
  3. 3Copy the prompt, the whole build spelled out for your AI, into whichever AI you use.
  4. 4Type your real announcements into the list, each with an optional link label and address; anything left empty simply never shows.
  5. 5Hover the ribbon to test that the cycle pauses while you read, then picks back up when your cursor leaves.
  6. 6Dismiss it with the X and scroll around: it should collapse smoothly, shift nothing, and stay gone for the visit.

What you can customize

  • One message or a cycle: static shows just your first message, no timers; rotate swaps every 5 seconds with a soft crossfade, pausing on hover.
  • Where it sits: top places it above your header and lets it scroll away; bottom pins it to the screen edge so it's always in view.
  • Colors, text size, and links all adapt to your site automatically, because your AI builds the ribbon right inside your own design.

You'll also like

fxinwa
Link copied

Sticky Share Bar

A small share rail with plain share URLs only. No SDKs, no trackers, no fake counters.

×

Your cart is waiting

Canvas tote$38
Enamel mug$18
Total$56
SAVE5
Back to checkout

Cart Saver Popup

An exit-intent popup that reminds shoppers what is sitting in their cart before they leave. Optional code, zero fake urgency.

3D Press Button

A chunky tactile button that visibly pushes down when clicked, like a real key.