Banner Gradient

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

gradient.html

<div class="ws-banner relative bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 px-4 py-3 text-center text-sm text-white" style="--banner-bg: var(--ws-color-primary);">
  <p class="mx-auto max-w-4xl">
    <span class="font-semibold">Announcing:</span> Our biggest update yet is here.
    <a href="#" class="ml-2 inline-flex items-center gap-1 font-semibold text-white 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 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

banner

Tier

enhanced

Kind

component

Extends

banner/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

bannergradientannouncementnotificationtop-barmarketing

Slots

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

Gradient variant of the announcement banner. Uses an indigo-to-purple-to-pink gradient background for higher visual impact. Includes text, arrow link, and dismiss button. Place above the navbar. Add a few lines of JS to handle the dismiss click.