popup coupon discount modal promo countdown copy flash-sale offer coupon popup modal discount promo copy-code countdown flash-sale offer checkout coupon code popup modal discount offer modal with copy code button flash sale popup with countdown
Popup Coupon
Fetch pattern JSON:
curl https://webspire.de/patterns/popup/coupon.json coupon.html
<style>
/* CSS copy feedback trick using peer checkbox */
#copy-trigger:checked ~ .copy-label-default { display: none; }
#copy-trigger:checked ~ .copy-label-done { display: inline; }
</style>
<!-- Modal overlay -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" role="dialog" aria-modal="true" aria-labelledby="coupon-heading">
<!-- Modal card -->
<div class="ws-popup relative w-full max-w-sm overflow-hidden rounded-3xl bg-[var(--ws-popup-bg)] shadow-2xl">
<!-- Close button -->
<button
class="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/20 text-white transition hover:bg-black/40"
aria-label="Close offer"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
<!-- Colored top banner -->
<div class="bg-gradient-to-br from-violet-600 to-indigo-600 px-8 pt-10 pb-8 text-center text-white">
<span class="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider">
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
Limited offer
</span>
<h2 id="coupon-heading" class="mt-4 text-4xl font-extrabold tracking-tight">Get 30% OFF</h2>
<p class="mt-2 text-sm text-white/80">Use this code at checkout before the offer expires.</p>
</div>
<!-- Card body -->
<div class="px-8 py-6">
<!-- Coupon code box with CSS copy feedback -->
<div class="flex items-center gap-2 rounded-xl border-2 border-dashed border-[var(--ws-popup-border)] bg-[var(--ws-color-surface-alt)] px-4 py-3">
<span class="flex-1 font-mono text-xl font-bold tracking-widest text-[var(--ws-popup-text)]">LAUNCH30</span>
<label class="relative inline-flex cursor-pointer items-center" aria-label="Copy coupon code">
<input id="copy-trigger" type="checkbox" class="peer sr-only">
<span class="copy-label-default flex items-center gap-1.5 rounded-lg bg-[var(--ws-color-primary)] px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
Copy
</span>
<span class="copy-label-done hidden items-center gap-1.5 rounded-lg bg-emerald-500 px-3 py-1.5 text-xs font-semibold text-white">
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Copied!
</span>
</label>
</div>
<!-- Countdown strip -->
<div class="mt-4 flex items-center justify-center gap-2 rounded-xl bg-[var(--ws-color-surface-alt)] px-4 py-2.5">
<svg class="h-4 w-4 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span class="text-sm font-medium text-[var(--ws-popup-text)]">Expires in</span>
<span class="font-mono text-sm font-bold text-red-500" aria-live="polite">02:14:38</span>
</div>
<!-- CTAs -->
<div class="mt-6 space-y-3">
<a href="#" class="block w-full rounded-xl bg-[var(--ws-color-primary)] px-4 py-3 text-center text-sm font-semibold text-white transition hover:opacity-90">
Shop now
</a>
<button class="block w-full text-center text-xs text-[var(--ws-popup-text-soft)] transition hover:text-[var(--ws-popup-text)]">
No thanks, I'll pay full price
</button>
</div>
</div>
</div>
</div>
<!-- Note: Add JS to wire up actual clipboard copy and a countdown timer.
The copy button uses a CSS checkbox peer trick for the Copied! state visual. -->
Details
Responsive Dark Mode SSR Safe Copy & Paste
Stable Published
popupcoupondiscountmodalpromocountdowncopyflash-saleoffer
Slots
| Name | Required | Description |
|---|---|---|
| banner | Yes | Gradient top banner with limited offer badge and discount headline. |
| coupon-code | Yes | Dashed border code box with monospace code and copy button. |
| countdown | Yes | Expiry countdown strip with clock icon and timer. |
| cta | Yes | Primary shop button and secondary dismiss text link. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| code | string | LAUNCH30 | The coupon code to display and copy. |
| discount | string | 30% | Discount percentage shown in the headline. |
Centered modal overlay with backdrop blur. Features a gradient violet/indigo top banner with “Limited offer” badge and “Get 30% OFF” headline, a dashed-border coupon code box with monospace code and CSS checkbox copy feedback, a countdown timer strip, a primary shop CTA, and a dismiss link. Wire up JS for real clipboard copy and live countdown.