Email Templates
Newsletter, transactional, promo and welcome emails.
Welcome Email Template
WebNexa
Welcome to the family! 🎉
You're now part of 25,000+ developers building beautiful products faster.
Hi Marcus,
Thanks for joining WebNexa! We're thrilled to have you here. Your account is ready and you can start exploring all our components right away.
1
Browse components
Explore 100+ ready-to-use UI blocks.
2
Copy & paste
Grab any component and drop it into your project.
<div class="uk-email">
<div class="uk-email-header">
<div class="uk-email-logo">◆ WebNexa</div>
</div>
<div class="uk-email-hero">
<h1 class="uk-email-hero-title">Welcome to the family! 🎉</h1>
<p class="uk-email-hero-desc">You're now part of 25,000+ developers.</p>
</div>
<div class="uk-email-body">
<p class="uk-email-text">Hi Marcus,</p>
<p class="uk-email-text">Thanks for joining WebNexa!</p>
<div class="uk-email-cta">
<a href="#" class="uk-email-btn">Get Started</a>
</div>
</div>
<div class="uk-email-footer">
<p class="uk-email-footer-small">© 2025 WebNexa</p>
</div>
</div>
<style>
.uk-email {
max-width: 520px;
margin: 0 auto;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
}
.uk-email-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
}
.uk-email-logo {
font-size: 1rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-email-logo-icon { color: #1e3a8a; }
.uk-email-hero {
padding: 2rem 1.5rem;
text-align: center;
background: linear-gradient(135deg, #eef2f8, #f8fafc);
}
.uk-email-hero-title {
font-size: 1.5rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-email-hero-desc {
font-size: 0.9rem;
color: #64748b;
}
.uk-email-body { padding: 1.5rem; text-align: left; }
.uk-email-text {
font-size: 0.88rem;
color: #334155;
line-height: 1.7;
margin-bottom: 1rem;
}
.uk-email-steps {
margin: 1.25rem 0;
}
.uk-email-step {
display: flex;
gap: 0.75rem;
padding: 0.65rem 0;
border-top: 1px solid #f1f5f9;
}
.uk-email-step-num {
width: 24px; height: 24px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
font-weight: 700;
flex-shrink: 0;
}
.uk-email-step-title {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-email-step-desc {
font-size: 0.78rem;
color: #94a3b8;
}
.uk-email-cta { text-align: center; margin-top: 1.5rem; }
.uk-email-btn {
display: inline-block;
padding: 0.7rem 1.75rem;
background: #1e3a8a;
color: #fff;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
}
.uk-email-footer {
padding: 1.25rem 1.5rem;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
text-align: center;
}
.uk-email-footer-text {
font-size: 0.78rem;
color: #64748b;
margin-bottom: 0.5rem;
}
.uk-email-footer-text a { color: #1e3a8a; }
.uk-email-footer-small {
font-size: 0.7rem;
color: #94a3b8;
}
.uk-email-footer-small a { color: #94a3b8; }
</style>
Receipt Email Template
WebNexa
Payment Confirmed
Thanks for your order, Marcus!
Amount paid
$78.00
Premium Template
$49.00
Icon Pack (500+)
$29.00
Total
$78.00
Invoice#INV-2025-042
DateMar 12, 2025
CardVisa •••• 4242
<div class="uk-email-receipt-head">
<div class="uk-email-receipt-check"><i class="fas fa-check"></i></div>
<h2 class="uk-email-receipt-title">Payment Confirmed</h2>
<p class="uk-email-receipt-sub">Thanks for your order!</p>
</div>
<div class="uk-email-receipt-amount">
<div class="uk-email-receipt-label">Amount paid</div>
<div class="uk-email-receipt-value">$78.00</div>
</div>
<div class="uk-email-receipt-row">
<span>Premium Template</span>
<strong>$49.00</strong>
</div>
<style>
.uk-email-receipt-head {
padding: 2rem 1.5rem 1rem;
text-align: center;
}
.uk-email-receipt-check {
width: 56px; height: 56px;
border-radius: 50%;
background: #ecfdf5;
color: #059669;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.uk-email-receipt-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.35rem;
}
.uk-email-receipt-sub {
font-size: 0.85rem;
color: #64748b;
}
.uk-email-receipt-amount {
text-align: center;
padding: 1.5rem;
background: #f8fafc;
border-radius: 0.85rem;
margin-bottom: 1.25rem;
}
.uk-email-receipt-label {
font-size: 0.72rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.uk-email-receipt-value {
font-size: 2.25rem;
font-weight: 800;
color: #0b1b2f;
letter-spacing: -0.02em;
margin-top: 0.25rem;
}
.uk-email-receipt-table {
border-top: 1px solid #f1f5f9;
padding-top: 1rem;
margin-bottom: 1.25rem;
}
.uk-email-receipt-row {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
padding: 0.5rem 0;
color: #475569;
}
.uk-email-receipt-row strong { color: #0b1b2f; }
.uk-email-receipt-total {
border-top: 1px solid #e2e8f0;
margin-top: 0.5rem;
padding-top: 0.75rem;
font-weight: 700;
}
.uk-email-receipt-info {
background: #f8fafc;
padding: 1rem;
border-radius: 0.65rem;
margin-bottom: 1.25rem;
}
.uk-email-receipt-info-row {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
padding: 0.35rem 0;
color: #64748b;
}
.uk-email-receipt-info-row strong { color: #0b1b2f; }
</style>
Newsletter Email Template
WebNexa Weekly
Issue #42 · Mar 2025
The future of UI is here
This week we're exploring how AI is reshaping the way we build interfaces.
How Figma is adding AI
A deep dive into Figma's new AI features.
Building with Tailwind v4
What's new in the latest release.
<div class="uk-email-header uk-email-header-dark">
<div class="uk-email-logo" style="color:#fff;">◆ WebNexa Weekly</div>
<div class="uk-email-date">Issue #42</div>
</div>
<h2 class="uk-email-news-title">The future of UI is here</h2>
<div class="uk-email-news-item">
<div class="uk-email-news-img"><img src="..." alt=""></div>
<div>
<div class="uk-email-news-item-title">How Figma is adding AI</div>
<div class="uk-email-news-item-desc">A deep dive.</div>
</div>
</div>
<style>
.uk-email-header-dark {
background: #0f172a;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.uk-email-date {
font-size: 0.72rem;
opacity: 0.6;
}
.uk-email-news-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-email-news-item {
display: flex;
gap: 0.75rem;
padding: 0.85rem 0;
border-top: 1px solid #f1f5f9;
text-align: left;
}
.uk-email-news-item:first-of-type { border-top: 0; padding-top: 1.25rem; }
.uk-email-news-img {
width: 80px; height: 60px;
border-radius: 0.5rem;
overflow: hidden;
flex-shrink: 0;
}
.uk-email-news-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.uk-email-news-item-title {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
margin-bottom: 2px;
}
.uk-email-news-item-desc {
font-size: 0.75rem;
color: #94a3b8;
}
</style>
Password Reset Email
WebNexa
Reset your password
We received a request to reset the password for your account. Click below to choose a new one.
Or copy and paste this link into your browser:
https://webnexa.com/reset?token=aBcD1234
If you didn't request this, you can safely ignore this email. Your password won't change.
<div class="uk-email-body uk-email-body-center">
<div class="uk-email-icon-circle"><i class="fas fa-lock"></i></div>
<h2 class="uk-email-title-center">Reset your password</h2>
<p class="uk-email-text-center">We received a request...</p>
<div class="uk-email-cta">
<a href="#" class="uk-email-btn">Reset Password</a>
</div>
<div class="uk-email-code">https://webnexa.com/reset?token=...</div>
<div class="uk-email-warning">
<i class="fas fa-info-circle"></i> If you didn't request this...
</div>
</div>
<style>
.uk-email-body-center { text-align: center; }
.uk-email-icon-circle {
width: 64px; height: 64px;
border-radius: 50%;
background: #eef2f8;
color: #1e3a8a;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.uk-email-title-center {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-email-text-center {
font-size: 0.88rem;
color: #64748b;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.uk-email-small {
font-size: 0.75rem;
color: #94a3b8;
margin: 1.5rem 0 0.5rem;
}
.uk-email-code {
background: #f1f5f9;
padding: 0.65rem;
border-radius: 0.5rem;
font-family: monospace;
font-size: 0.78rem;
color: #475569;
word-break: break-all;
margin-bottom: 1.5rem;
}
.uk-email-warning {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
background: #fef3c7;
color: #92400e;
border-radius: 0.5rem;
font-size: 0.75rem;
text-align: left;
align-items: flex-start;
}
</style>
Promotional Email
Limited Time
50% OFF
All Pro plans this week only
<div class="uk-email-hero uk-email-hero-dark">
<div class="uk-email-promo-badge">Limited Time</div>
<div class="uk-email-promo-title">50% OFF</div>
<div class="uk-email-promo-desc">All Pro plans this week only</div>
</div>
<div class="uk-email-timer">
<span>Ends in</span>
<div class="uk-email-timer-box"><strong>2</strong><span>Days</span></div>
...
</div>
<style>
.uk-email-hero-dark {
background: linear-gradient(135deg, #1e3a8a, #7c3aed);
color: #fff;
padding: 2.5rem 1.5rem;
text-align: center;
}
.uk-email-promo-badge {
display: inline-block;
padding: 4px 10px;
background: rgba(255,255,255,0.2);
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.uk-email-promo-title {
font-size: 3rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: 0.5rem;
}
.uk-email-promo-desc {
font-size: 0.85rem;
opacity: 0.9;
}
.uk-email-timer {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-size: 0.75rem;
color: #64748b;
}
.uk-email-timer-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.4rem 0.65rem;
background: #f1f5f9;
border-radius: 0.4rem;
}
.uk-email-timer-box strong {
font-size: 1rem;
color: #0b1b2f;
}
.uk-email-timer-box span {
font-size: 0.6rem;
text-transform: uppercase;
font-weight: 700;
color: #94a3b8;
}
</style>
Notification Email
WebNexa
New comment on your post
2 minutes ago
"This is exactly what I needed! Thanks for sharing. 🔥"
<div class="uk-email-notif-head">
<div class="uk-email-notif-icon"><i class="fas fa-comment"></i></div>
<div>
<div class="uk-email-notif-title">New comment on your post</div>
<div class="uk-email-notif-time">2 minutes ago</div>
</div>
</div>
<div class="uk-email-notif-quote">
"This is exactly what I needed!"
</div>
<div class="uk-email-notif-author">
<img src="..." alt="">
<div>
<div class="uk-email-notif-author-name">Ali Khan</div>
<div class="uk-email-notif-author-role">Designer</div>
</div>
</div>
<style>
.uk-email-notif-head {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 1.25rem;
text-align: left;
}
.uk-email-notif-icon {
width: 40px; height: 40px;
border-radius: 0.6rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.uk-email-notif-title {
font-size: 0.9rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-email-notif-time {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-email-notif-quote {
padding: 1rem 1.25rem;
border-left: 3px solid #1e3a8a;
background: #f8fafc;
font-style: italic;
font-size: 0.88rem;
color: #334155;
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 1rem;
text-align: left;
}
.uk-email-notif-author {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.85rem;
background: #f1f5f9;
border-radius: 0.65rem;
margin-bottom: 1.25rem;
}
.uk-email-notif-author img {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
}
.uk-email-notif-author-name {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
text-align: left;
}
.uk-email-notif-author-role {
font-size: 0.72rem;
color: #94a3b8;
text-align: left;
}
</style>