Sticky Bar Pricing

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

pricing.html

<div class="ws-sticky-bar fixed bottom-0 inset-x-0 z-40 border-t border-[var(--ws-sticky-bar-border)] bg-[var(--ws-sticky-bar-bg)] shadow-[0_-4px_24px_-4px_oklch(0%_0_0/0.12)] backdrop-blur-sm">
  <div class="mx-auto flex max-w-5xl items-center justify-between gap-4 px-6 py-3.5">
    <!-- Product + pricing info -->
    <div class="flex items-center gap-4 min-w-0">
      <!-- App icon -->
      <span class="hidden shrink-0 size-9 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-blue-600 text-xs font-black text-white shadow-sm sm:flex">
        CC
      </span>
      <div class="min-w-0">
        <p class="truncate text-sm font-bold text-[var(--ws-sticky-bar-text)]">Creative Cloud Pro</p>
        <p class="truncate text-xs text-[var(--ws-sticky-bar-text-muted)]">
          ab <span class="font-semibold text-[var(--ws-sticky-bar-text)]">38,98 €/Monat</span>
          <span class="hidden sm:inline"> — inkl. MwSt. · Jährlich, monatlich abgerechnet</span>
        </p>
      </div>
    </div>

    <!-- CTAs -->
    <div class="flex shrink-0 items-center gap-2">
      <a href="#" class="hidden rounded-full border border-[var(--ws-sticky-bar-border)] px-4 py-2 text-sm font-semibold text-[var(--ws-sticky-bar-text)] transition hover:bg-[var(--ws-color-surface-alt)] sm:inline-flex">
        Kostenlos testen
      </a>
      <a href="#" class="rounded-full bg-[var(--ws-color-primary)] px-5 py-2 text-sm font-bold text-[var(--ws-color-primary-text)] shadow-sm transition hover:bg-[var(--ws-color-primary-hover)]">
        Abo starten
      </a>
    </div>
  </div>
</div>

<!-- Spacer so page content isn't hidden behind the bar -->
<div class="h-16"></div>

Details

Family

sticky-bar

Tier

enhanced

Kind

component

Extends

sticky-bar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

stickybarpricingbottomctasaassubscriptionadobeconversionpersistent

Slots

Name	Required	Description
product-info	Yes	App icon, product name, and price line.
cta-secondary	No	Ghost CTA (free trial, hidden on mobile).
cta-primary	Yes	Main conversion CTA.

Persistent bottom pricing bar for subscription and SaaS products. Stays fixed while the user scrolls — keeps the conversion CTA always accessible without interrupting content flow.

Include the spacer <div class="h-16"> at the bottom of your page to prevent the last section from being obscured.