Banner Base

Fetch pattern JSON: curl https://webspire.de/patterns/banner/base.json

base.html

<div class="ws-banner relative bg-[var(--ws-banner-bg)] px-4 py-3 text-center text-sm text-[var(--ws-banner-text)]">
  <p class="mx-auto max-w-4xl">
    <span class="font-semibold">New:</span> UI Pattern Registry is live — browse 50+ Tailwind sections.
    <a href="#" class="ml-2 inline-flex items-center gap-1 font-semibold text-[var(--ws-banner-text)] underline decoration-white/60 underline-offset-2 transition hover:decoration-white">
      Explore now
      <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
    </a>
  </p>
  <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--ws-banner-text)]/70 transition hover:text-[var(--ws-banner-text)]" aria-label="Dismiss announcement">
    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
  </button>
</div>

Details

Family

banner

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

bannerannouncementnotificationtop-barmarketing

Slots

Name	Required	Description
message	Yes	Announcement text.
link	No	Optional CTA link.
dismiss	No	Close button.

Slim announcement bar for the top of the page. Includes text, arrow link, and dismiss button. Place above the navbar. Add a few lines of JS to handle the dismiss click.