Sticky Bar Base

Fetch pattern JSON: curl https://webspire.de/patterns/sticky-bar/base.json

base.html

<div class="ws-sticky-bar relative bg-[var(--ws-sticky-bar-accent)] px-4 py-3 text-center">
  <p class="mx-auto max-w-4xl text-sm font-medium text-[var(--ws-sticky-bar-action-text)]">
    <span class="font-semibold">New:</span> Version 2.0 is here!
    <a href="#" class="ml-2 inline-flex items-center gap-1 font-semibold underline decoration-white/60 underline-offset-2 transition hover:decoration-white">
      Learn more
      <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-md p-1 text-white/70 transition hover:text-white" 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

sticky-bar

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

sticky-barannouncementtop-barbannernotification

Slots

Name	Required	Description
message	Yes	Announcement text.
link	No	Action link with arrow.
dismiss	No	Close button.

Top announcement bar with accent background color. Centered message with bold label, descriptive text, and an arrow link. Dismiss button on the right. Positioned static for preview — add sticky top-0 or fixed in your layout.