Top announcement bar
A strip across the top with a light sweeping through it, a link to the news and an X that folds it away.
Settings
Code
<div class="uv-oab"><div class="bn" role="region" aria-label="Announcement"><div class="in"><span class="tg">New</span><span class="tx">New: invoice templates with your logo</span><a href="#">See what’s new</a><button type="button" class="x" aria-label="Close announcement"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div></div><div class="ap"><div class="nb"><i></i><i></i><i></i></div><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div></div><button type="button" class="fire">Show banner</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Launches, sales and policy changes often deserve a slim bar above the navigation rather than a popup. This one uses a gradient between your two colors with a soft shine running across it, a New tag, the message and a link. Closing it collapses the height smoothly, so the page content moves up instead of jumping, and a button appears to bring it back in the demo.
The collapse animates grid rows, so it works with any message length or wrapping. Remember the dismissal in storage on your site so returning visitors do not see the same bar again.