Back to transactional templates
Course Enrollment Confirmation
Enrollment confirmation emails set the tone for the entire learning experience. This warm, structured template reassures new students with essential course information while generating genuine excitement for what's ahead.
Responsive Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to UX Foundations — Your enrollment is confirmed</title>
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.mobile-pad { padding: 28px 24px !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#F0EBE3; font-family:'Helvetica Neue', Arial, sans-serif;">
<center style="width:100%; background-color:#F0EBE3;">
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">Welcome to UX Foundations. Your enrollment is confirmed and your course starts Monday.͏ ͏ ͏</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto;">
<!-- Header -->
<tr>
<td style="padding: 28px 40px; background-color: #2D1F14; border-bottom: 1px solid #3D2E20;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<p style="margin:0; font-size: 17px; font-weight: 700; color: #F5EFE6; letter-spacing: -0.3px;">Craft School</p>
<p style="margin: 2px 0 0; font-size: 11px; color: #8B7260; letter-spacing: 0.5px;">Professional design education</p>
</td>
<td style="text-align: right;">
<span style="display: inline-block; background-color: #C47940; color: #FFF8F0; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 3px; letter-spacing: 0.3px;">Enrolled</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- Hero -->
<tr>
<td style="padding: 48px 40px 36px; background-color: #2D1F14;" class="mobile-pad">
<p style="margin: 0 0 10px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #C47940; font-weight: 600;">Welcome to the course</p>
<h1 style="margin: 0 0 16px; font-size: 34px; font-weight: 700; color: #F5EFE6; line-height: 1.15; letter-spacing: -0.5px; font-family: Georgia, serif;">UX Foundations</h1>
<p style="margin: 0; font-size: 15px; color: #A09080; line-height: 1.75;">A 6-week practical course covering research methods, information architecture, interaction design, and usability testing. You're joining 847 other students in the August cohort.</p>
</td>
</tr>
<!-- Course starts -->
<tr>
<td style="padding: 0 40px 40px; background-color: #2D1F14;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #3D2E20; border-radius: 6px;">
<tr>
<td style="padding: 24px 28px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33%">
<p style="margin: 0 0 4px; font-size: 10px; color: #8B7260; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Start date</p>
<p style="margin: 0; font-size: 16px; font-weight: 600; color: #F5EFE6;">Aug 25, 2026</p>
</td>
<td width="33%" style="text-align: center;">
<p style="margin: 0 0 4px; font-size: 10px; color: #8B7260; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Duration</p>
<p style="margin: 0; font-size: 16px; font-weight: 600; color: #F5EFE6;">6 weeks</p>
</td>
<td width="33%" style="text-align: right;">
<p style="margin: 0 0 4px; font-size: 10px; color: #8B7260; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Format</p>
<p style="margin: 0; font-size: 16px; font-weight: 600; color: #F5EFE6;">Self-paced</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- What you'll cover -->
<tr>
<td style="padding: 36px 40px 28px; background-color: #F5EFE6;" class="mobile-pad">
<p style="margin: 0 0 20px; font-size: 11px; color: #9B8878; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;">What you'll cover</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="50%" style="padding-right: 16px; padding-bottom: 16px; vertical-align: top;">
<p style="margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #2D1F14;">Week 1–2</p>
<p style="margin: 0; font-size: 13px; color: #6B5A48; line-height: 1.6;">User research methods & synthesis</p>
</td>
<td width="50%" style="padding-bottom: 16px; vertical-align: top;">
<p style="margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #2D1F14;">Week 3–4</p>
<p style="margin: 0; font-size: 13px; color: #6B5A48; line-height: 1.6;">Information architecture & wireframing</p>
</td>
</tr>
<tr>
<td width="50%" style="padding-right: 16px; vertical-align: top;">
<p style="margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #2D1F14;">Week 5</p>
<p style="margin: 0; font-size: 13px; color: #6B5A48; line-height: 1.6;">Interaction design principles</p>
</td>
<td width="50%" style="vertical-align: top;">
<p style="margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #2D1F14;">Week 6</p>
<p style="margin: 0; font-size: 13px; color: #6B5A48; line-height: 1.6;">Usability testing & final project</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding: 0 40px 40px; background-color: #F5EFE6;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #2D1F14; border-radius: 4px;">
<a href="#" style="display:inline-block; font-size: 14px; font-weight: 600; color: #F5EFE6; text-decoration: none; padding: 14px 28px; border-radius: 4px;">Go to my course →</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 24px 40px; background-color: #EDE6DC; border-top: 1px solid #DDD6CC; text-align: center;">
<p style="margin: 0 0 4px; font-size: 12px; color: #9B8878;">Craft School · 12 Academy Street · New York, NY 10004</p>
<p style="margin: 0; font-size: 11px; color: #BAB0A4;"><a href="#" style="color: #9B8878; text-decoration: none;">Manage notifications</a> · <a href="#" style="color: #9B8878; text-decoration: none;">Unsubscribe</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>