Newsletter
Inline, boxed, split and hero newsletter signup sections.
Inline Newsletter
No spam. Unsubscribe anytime.
<form class="uk-nl-inline">
<input type="email" placeholder="Enter your email" class="uk-nl-input" required>
<button type="submit" class="uk-nl-btn">Subscribe</button>
</form>
<style>
.uk-nl-inline {
display: flex;
gap: 0.5rem;
padding: 0.4rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
transition: all 0.15s;
}
.uk-nl-inline:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-nl-input {
flex: 1;
border: 0;
outline: 0;
padding: 0.65rem 1rem;
font-size: 0.88rem;
background: transparent;
border-radius: 999px;
}
.uk-nl-btn {
padding: 0.65rem 1.5rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 999px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s;
}
.uk-nl-btn:hover { background: #0f2a5c; }
</style>
Boxed Newsletter Card
Join our newsletter
Get the latest updates and tips delivered to your inbox.
<div class="uk-nl-boxed">
<div class="uk-nl-icon"><i class="fas fa-envelope-open-text"></i></div>
<h4 class="uk-nl-title">Join our newsletter</h4>
<p class="uk-nl-desc">Get the latest updates.</p>
<form class="uk-nl-stack">
<input type="email" placeholder="[email protected]" class="uk-nl-field" required>
<button class="uk-nl-btn uk-nl-btn-block">Subscribe</button>
</form>
</div>
<style>
.uk-nl-boxed {
text-align: center;
padding: 2rem 1.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
.uk-nl-icon {
width: 56px; height: 56px;
border-radius: 1rem;
background: #eef2f8;
color: #1e3a8a;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.uk-nl-title {
font-weight: 800;
color: #0b1b2f;
font-size: 1.15rem;
margin-bottom: 0.35rem;
}
.uk-nl-desc {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 1.25rem;
}
.uk-nl-stack {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.uk-nl-field {
padding: 0.7rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 0.88rem;
outline: 0;
transition: all 0.15s;
}
.uk-nl-field:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-nl-btn-block { width: 100%; padding: 0.7rem; }
</style>
Split Hero Newsletter
Level up your design game
Weekly tips on UI, UX and code. Read by 25,000+ developers.
<div class="uk-nl-split">
<div class="uk-nl-split-left">
<div class="uk-nl-split-title">Level up your design game</div>
<div class="uk-nl-split-desc">Weekly tips on UI, UX and code.</div>
</div>
<form class="uk-nl-split-right">
<input type="email" placeholder="[email protected]" class="uk-nl-field" required>
<button class="uk-nl-btn">Join Free</button>
</form>
</div>
<style>
.uk-nl-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding: 2rem;
background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 100%);
border-radius: 1.25rem;
align-items: center;
color: #fff;
}
.uk-nl-split-title {
font-weight: 800;
font-size: 1.25rem;
margin-bottom: 0.35rem;
}
.uk-nl-split-desc {
font-size: 0.85rem;
opacity: 0.85;
}
.uk-nl-split-right {
display: flex;
gap: 0.5rem;
background: #fff;
padding: 0.35rem;
border-radius: 999px;
}
.uk-nl-split-right .uk-nl-field {
border: 0;
}
@media (max-width: 640px) {
.uk-nl-split { grid-template-columns: 1fr; }
}
</style>
Footer Newsletter
Stay in the loop
Get product updates, no spam.
<div style="background:#0b1b2f;color:#fff;border-radius:1rem;padding:1.75rem;">
<div style="font-weight:800;font-size:1.05rem;">Stay in the loop</div>
<div style="font-size:0.82rem;opacity:0.7;margin-bottom:1.15rem;">Get product updates, no spam.</div>
<form style="display:flex;gap:0.5rem;">
<input type="email" placeholder="[email protected]"
style="flex:1;padding:0.65rem 1rem;border-radius:0.5rem;border:1px solid #1e293b;background:#1e293b;color:#fff;outline:0;">
<button style="padding:0.65rem 1.25rem;background:#1e3a8a;color:#fff;border:0;border-radius:0.5rem;font-weight:700;">
Subscribe
</button>
</form>
</div>
Newsletter with Perks
Join 25,000+ readers
- Weekly design tips
- Free UI resources
- Early access to new tools
<div class="uk-nl-boxed">
<h4 class="uk-nl-title">Join 25,000+ readers</h4>
<ul class="uk-nl-perks">
<li><i class="fas fa-check"></i> Weekly design tips</li>
<li><i class="fas fa-check"></i> Free UI resources</li>
<li><i class="fas fa-check"></i> Early access to new tools</li>
</ul>
<form class="uk-nl-stack">
<input type="email" placeholder="[email protected]" class="uk-nl-field" required>
<button class="uk-nl-btn uk-nl-btn-block">Subscribe Free</button>
</form>
</div>
<style>
.uk-nl-perks {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}
.uk-nl-perks li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #475569;
padding: 0.35rem 0;
}
.uk-nl-perks i { color: #059669; font-size: 0.75rem; }
</style>
Subscribed Success State
You're subscribed!
Check your inbox to confirm your email address.
<div class="uk-nl-success">
<div class="uk-nl-success-icon"><i class="fas fa-check"></i></div>
<div class="uk-nl-title">You're subscribed!</div>
<div class="uk-nl-desc">Check your inbox to confirm.</div>
</div>
<style>
.uk-nl-success {
text-align: center;
padding: 2rem;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 1rem;
}
.uk-nl-success-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #059669;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: 1rem;
}
</style>