Coupons
Ticket, dashed, copy-able and stacked coupon codes.
Ticket Style Coupon
30%
OFF
Summer Sale
Use code: SUMMER30
Valid until Aug 31
<div class="uk-coup-ticket">
<div class="uk-coup-ticket-left">
<div class="uk-coup-ticket-value">30%</div>
<div class="uk-coup-ticket-off">OFF</div>
</div>
<div class="uk-coup-ticket-divider">
<div class="uk-coup-notch top"></div>
<div class="uk-coup-notch bottom"></div>
</div>
<div class="uk-coup-ticket-right">
<div class="uk-coup-ticket-title">Summer Sale</div>
<div class="uk-coup-ticket-code">Use code: <strong>SUMMER30</strong></div>
<div class="uk-coup-ticket-terms">Valid until Aug 31</div>
</div>
</div>
<style>
.uk-coup-ticket {
display: flex;
background: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
border: 1px solid #e2e8f0;
}
.uk-coup-ticket-left {
background: #1e3a8a;
color: #fff;
padding: 1.5rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 110px;
}
.uk-coup-ticket-value {
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
.uk-coup-ticket-off {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-top: 4px;
opacity: 0.8;
}
.uk-coup-ticket-divider {
position: relative;
width: 2px;
background: #f1f5f9;
}
.uk-coup-notch {
position: absolute;
width: 20px; height: 20px;
border-radius: 50%;
background: #f9fafc;
left: 50%;
transform: translateX(-50%);
}
.uk-coup-notch.top { top: -10px; }
.uk-coup-notch.bottom { bottom: -10px; }
.uk-coup-ticket-right {
flex: 1;
padding: 1.25rem;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.uk-coup-ticket-title {
font-size: 1rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.35rem;
}
.uk-coup-ticket-code {
font-size: 0.82rem;
color: #475569;
margin-bottom: 0.5rem;
}
.uk-coup-ticket-code strong {
color: #1e3a8a;
background: #eef2f8;
padding: 2px 6px;
border-radius: 4px;
font-family: 'SF Mono', monospace;
}
.uk-coup-ticket-terms {
font-size: 0.7rem;
color: #94a3b8;
}
</style>
Dashed Border Coupon
$10 off your first order
Minimum spend $50. New customers only.
<div class="uk-coup-dashed">
<div class="uk-coup-dashed-icon"><i class="fas fa-tag"></i></div>
<div class="uk-coup-dashed-body">
<div class="uk-coup-dashed-title">$10 off your first order</div>
<div class="uk-coup-dashed-desc">Minimum spend $50. New customers only.</div>
</div>
<div class="uk-coup-dashed-action">
<button class="uk-coup-copy-btn">Copy Code</button>
</div>
</div>
<style>
.uk-coup-dashed {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: #eef2f8;
border: 2px dashed #93c5fd;
border-radius: 0.85rem;
}
.uk-coup-dashed-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.uk-coup-dashed-body { flex: 1; text-align: left; }
.uk-coup-dashed-title {
font-size: 0.9rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-coup-dashed-desc {
font-size: 0.75rem;
color: #64748b;
margin-top: 2px;
}
.uk-coup-copy-btn {
padding: 0.5rem 1rem;
background: #fff;
color: #1e3a8a;
border: 1.5px solid #1e3a8a;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.uk-coup-copy-btn:hover {
background: #1e3a8a;
color: #fff;
}
</style>
Dark Gradient Promo
<div class="uk-coup-dark">
<div class="uk-coup-dark-glow"></div>
<div class="uk-coup-dark-content">
<div class="uk-coup-dark-badge">Limited Time</div>
<h3 class="uk-coup-dark-title">Get 50% off Pro</h3>
<p class="uk-coup-dark-desc">Upgrade today and save.</p>
<div class="uk-coup-dark-code">
<span class="uk-coup-dark-code-val">PRO50</span>
<button class="uk-coup-dark-copy"><i class="fas fa-copy"></i></button>
</div>
</div>
</div>
<style>
.uk-coup-dark {
position: relative;
background: #0f172a;
border-radius: 1.25rem;
padding: 2rem;
overflow: hidden;
color: #fff;
}
.uk-coup-dark-glow {
position: absolute;
top: -100px; right: -100px;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%);
}
.uk-coup-dark-content { position: relative; text-align: left; }
.uk-coup-dark-badge {
display: inline-block;
background: rgba(99,102,241,0.2);
color: #a5b4fc;
font-size: 0.65rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.uk-coup-dark-title {
font-size: 1.75rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 0.5rem;
}
.uk-coup-dark-desc {
font-size: 0.9rem;
color: #94a3b8;
margin-bottom: 1.5rem;
}
.uk-coup-dark-code {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.4rem 0.4rem 1rem;
background: #1e293b;
border-radius: 0.65rem;
border: 1px solid #334155;
}
.uk-coup-dark-code-val {
font-family: 'SF Mono', monospace;
font-weight: 700;
letter-spacing: 0.1em;
color: #60a5fa;
}
.uk-coup-dark-copy {
width: 28px; height: 28px;
border-radius: 0.4rem;
background: #334155;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.75rem;
}
.uk-coup-dark-copy:hover { background: #475569; }
</style>
Available Coupons List
20% OFF
Spring Savings
Valid until Apr 30
$15 OFF
Welcome Bonus
Min. spend $100 · One-time use
FREE SHIP
Free Shipping
Expired on Mar 01
Expired
<div class="uk-coup-list-item active">
<div class="uk-coup-list-left"><div class="uk-coup-list-val">20% OFF</div></div>
<div class="uk-coup-list-body">
<div class="uk-coup-list-title">Spring Savings</div>
<div class="uk-coup-list-exp">Valid until Apr 30</div>
</div>
<div class="uk-coup-list-radio"><i class="fas fa-check-circle"></i></div>
</div>
<style>
.uk-coup-list-item {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
overflow: hidden;
cursor: pointer;
transition: all 0.15s;
}
.uk-coup-list-item:hover { border-color: #1e3a8a; }
.uk-coup-list-item.active {
border-color: #1e3a8a;
background: #f8fafc;
box-shadow: 0 0 0 2px rgba(30,58,138,0.1);
}
.uk-coup-list-item.disabled {
opacity: 0.5;
pointer-events: none;
}
.uk-coup-list-left {
background: #1e3a8a;
color: #fff;
padding: 1.25rem 1rem;
min-width: 90px;
text-align: center;
}
.uk-coup-list-item.disabled .uk-coup-list-left { background: #94a3b8; }
.uk-coup-list-val {
font-size: 0.85rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.uk-coup-list-body {
flex: 1;
padding: 1rem 1.15rem;
text-align: left;
}
.uk-coup-list-title {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-coup-list-exp {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-coup-list-radio {
padding-right: 1.15rem;
font-size: 1.1rem;
color: #cbd5e1;
}
.uk-coup-list-item.active .uk-coup-list-radio { color: #1e3a8a; }
.uk-coup-list-radio.disabled-tag {
font-size: 0.65rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
</style>
Horizontal Bar Coupon
<div class="uk-coup-bar">
<div class="uk-coup-bar-icon"><i class="fas fa-gift"></i></div>
<div class="uk-coup-bar-text">
<strong>FLASH10</strong> — 10% off everything
</div>
<button class="uk-coup-bar-btn">Apply</button>
</div>
<style>
.uk-coup-bar {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1.25rem;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 0.65rem;
color: #78350f;
}
.uk-coup-bar-icon {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: #d97706;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-coup-bar-text {
flex: 1;
font-size: 0.82rem;
text-align: left;
}
.uk-coup-bar-text strong {
background: rgba(217, 119, 6, 0.15);
padding: 2px 6px;
border-radius: 4px;
font-family: 'SF Mono', monospace;
font-weight: 700;
}
.uk-coup-bar-btn {
padding: 0.35rem 0.9rem;
background: #78350f;
color: #fff;
border: 0;
border-radius: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
</style>
Copy Code with Feedback
Your discount code
WELCOME15
Paste it at checkout to save 15%
<div class="uk-coup-copy">
<div class="uk-coup-copy-label">Your discount code</div>
<div class="uk-coup-copy-code">
<span class="uk-coup-copy-val" id="coupCode">WELCOME15</span>
<button class="uk-coup-copy-btn2" onclick="...">
<i class="far fa-copy"></i> Copy
</button>
</div>
<div class="uk-coup-copy-hint">
<i class="fas fa-info-circle"></i> Paste at checkout to save 15%
</div>
</div>
<script>
// JS: copy to clipboard + visual feedback
</script>
<style>
.uk-coup-copy {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
padding: 1.25rem;
text-align: center;
}
.uk-coup-copy-label {
font-size: 0.72rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.uk-coup-copy-code {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #eef2f8;
border: 2px dashed #93c5fd;
border-radius: 0.65rem;
padding: 0.5rem 0.5rem 0.5rem 1.15rem;
}
.uk-coup-copy-val {
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #1e3a8a;
font-family: 'SF Mono', monospace;
}
.uk-coup-copy-btn2 {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0.4rem 0.85rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.uk-coup-copy-btn2.copied { background: #059669; }
.uk-coup-copy-hint {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 0.85rem;
}
.uk-coup-copy-hint i { margin-right: 4px; }
</style>