countdown timer sale flash-sale cta pricing urgency inline banner countdown flash-sale urgency timer inline sale limited offer cta compact countdown timer with sale CTA inline flash sale banner with countdown and price limited time offer strip with timer and buy button
Countdown Inline CTA
Fetch pattern JSON:
curl https://webspire.de/patterns/countdown/inline-cta.json inline-cta.html
<section class="ws-countdown bg-[var(--ws-color-bg)] py-14">
<div class="mx-auto max-w-7xl px-6">
<!-- Eyebrow -->
<p class="mb-6 text-center text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-text-soft)]">Limited offer — ends in</p>
<!-- Compact inline strip -->
<div class="mx-auto flex max-w-2xl flex-col items-center gap-4 rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-6 py-5 sm:flex-row sm:gap-6">
<!-- Countdown units -->
<div class="flex shrink-0 items-center gap-3">
<!-- Days -->
<div class="flex flex-col items-center">
<span class="tabular-nums text-2xl font-bold leading-none text-[var(--ws-color-text)]" id="ws-cta-days">02</span>
<span class="mt-1 text-[10px] uppercase tracking-widest text-[var(--ws-color-text-soft)]">days</span>
</div>
<span class="mb-4 text-xl font-light text-[var(--ws-color-text-soft)]">:</span>
<!-- Hours -->
<div class="flex flex-col items-center">
<span class="tabular-nums text-2xl font-bold leading-none text-[var(--ws-color-text)]" id="ws-cta-hours">14</span>
<span class="mt-1 text-[10px] uppercase tracking-widest text-[var(--ws-color-text-soft)]">hrs</span>
</div>
<span class="mb-4 text-xl font-light text-[var(--ws-color-text-soft)]">:</span>
<!-- Minutes -->
<div class="flex flex-col items-center">
<span class="tabular-nums text-2xl font-bold leading-none text-[var(--ws-color-text)]" id="ws-cta-mins">37</span>
<span class="mt-1 text-[10px] uppercase tracking-widest text-[var(--ws-color-text-soft)]">min</span>
</div>
<span class="mb-4 text-xl font-light text-[var(--ws-color-text-soft)]">:</span>
<!-- Seconds -->
<div class="flex flex-col items-center">
<span class="tabular-nums text-2xl font-bold leading-none text-[var(--ws-color-text)]" id="ws-cta-secs">09</span>
<span class="mt-1 text-[10px] uppercase tracking-widest text-[var(--ws-color-text-soft)]">sec</span>
</div>
</div>
<!-- Divider -->
<div class="hidden h-12 w-px bg-[var(--ws-color-border)] sm:block"></div>
<!-- CTA -->
<div class="flex w-full flex-col items-center gap-3 sm:flex-row sm:justify-between">
<div class="text-center sm:text-left">
<p class="text-sm font-semibold text-[var(--ws-color-text)]">Pro Plan — Launch Special</p>
<p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">
<span class="line-through text-[var(--ws-color-text-soft)]">$49/mo</span>
<span class="ml-1.5 font-bold text-[var(--ws-color-accent)]">$29/mo</span>
<span class="ml-1 text-[var(--ws-color-text-soft)]">· Save 40%</span>
</p>
</div>
<a href="#" class="shrink-0 rounded-xl bg-[var(--ws-color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90">
Get the deal
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
countdowntimersaleflash-salectapricingurgencyinlinebanner
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Short label above the strip (e.g. "Limited offer — ends in"). |
| timer | Yes | Four countdown units (days, hours, minutes, seconds) with colon separators. |
| offer | Yes | Product name, original price (strikethrough), discounted price, and savings percentage. |
| cta-button | Yes | Solid accent CTA button (e.g. "Get the deal"). |
Compact horizontal strip: countdown timer (days/hours/minutes/seconds) on the left, vertical divider, offer name + strikethrough price + discounted price + CTA button on the right. Stacks on mobile. Different from countdown/base which is a standalone full-width section with large digit boxes and a centered headline — this variant is a space-efficient urgency element that can live above or inside a pricing page.