Reference
Reusable, email-safe blocks built with tables and fully inline styles — no external CSS, no flexbox or grid — so every component copy-pastes cleanly into Canvas, Outlook, or any HTML email tool. Switch between Preview and Code on any component, or send it straight to the Email Builder.
Full-strength colours pair with white text; tints pair with black text. Click a swatch to copy its hex code.
Core Orange
#F26322Brand Blue
#00498FCore Blue
#009ADACore Indigo
#00013ACore Green
#65BD60Core Purple
#5F277ECore Pink
#EE3D96
<div style="background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 24px;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="vertical-align: middle; white-space: nowrap;">
<span style="display: inline-block; width: auto; height: 30px; line-height: 30px; text-align: center; background-color: #00498F; color: #ffffff; border-radius: 8px; font-weight: 700; font-size: 14px; vertical-align: middle; padding: 0px 10px;">CPPE</span>
<span style="font-size: 15px; font-weight: 600; color: #1f2937; vertical-align: middle; margin-left: 8px;">News Update</span>
</td>
<td style="vertical-align: middle; text-align: right;">
<a href="#" style="display: inline-block; font-size: 13px; font-weight: 500; color: #374151; text-decoration: none; padding: 7px 12px; border-radius: 8px; margin-left: 2px;">This week</a>
<a href="#" style="display: inline-block; font-size: 13px; font-weight: 500; color: #374151; text-decoration: none; padding: 7px 12px; border-radius: 8px; margin-left: 2px;">Events</a>
<a href="#" style="display: inline-block; font-size: 13px; font-weight: 600; color: #ffffff; background-color: #00498F; text-decoration: none; padding: 7px 14px; border-radius: 8px; margin-left: 6px;">Take action</a>
</td>
</tr>
</table>
</div><div style="display: none; max-height: 0; overflow: hidden; mso-hide: all; font-size: 1px; line-height: 1px; color: #eef0f2;"> Preview text that appears next to the subject line in the inbox — keep it under 90 characters. </div>
<div style="background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 28px 28px 20px 28px;"> <span style="display: inline-block; font-size: 12px; font-weight: 600; color: #111827; background-color: #FCE0D3; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;">Week 2 Announcement</span> <p style="margin: 12px 0 0 0; font-size: 15px;">Dear Cohort,</p> <p style="margin: 8px 0 0 0; color: #4b5563;">Opening line of the announcement goes here.</p> </div>
<div style="background-color: #00498F; border-radius: 12px; padding: 40px 32px; text-align: center;"> <p style="margin: 0 0 10px 0; color: #CCEBF8; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;">Limited time</p> <h1 style="margin: 0 0 12px 0; color: #ffffff; font-size: 26px; font-weight: 700; line-height: 1.3;">Big announcement headline goes here</h1> <p style="margin: 0 0 24px 0; color: #D1DEEB; font-size: 14.5px; line-height: 1.6;">Supporting sentence that explains the announcement in a bit more detail.</p> <a href="#" style="display: inline-block; background-color: #ffffff; color: #00498F; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px;">Call to action</a> </div>
<div style="background-color: #00013A; border-radius: 8px; padding: 10px 18px; text-align: center;"> <p style="margin: 0; color: #ffffff; font-size: 13px; font-weight: 600;">Announcement text goes here — <a href="#" style="color: #99D7F0; text-decoration: underline;">learn more</a></p> </div>
<h2 style="margin: 0; color: #00013A; font-size: 22px; font-weight: 700; line-height: 1.3;">Section heading goes here</h2>
<div> <p style="margin: 0 0 6px 0; color: #00498F; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;">Eyebrow label</p> <h2 style="margin: 0; color: #00013A; font-size: 22px; font-weight: 700; line-height: 1.3;">Section heading goes here</h2> </div>
<p style="margin: 0; color: #374151; font-size: 14.5px; line-height: 1.7;">Body paragraph text goes here. Replace this with your own copy — keep line length comfortable and use short paragraphs for easy scanning on mobile.</p>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="padding: 0 0 10px 0; vertical-align: top; width: 18px; color: #00498F; font-weight: 700;">•</td>
<td style="padding: 0 0 10px 0; color: #374151; font-size: 14px; line-height: 1.6;">First point goes here</td>
</tr>
<tr>
<td style="padding: 0 0 10px 0; vertical-align: top; width: 18px; color: #00498F; font-weight: 700;">•</td>
<td style="padding: 0 0 10px 0; color: #374151; font-size: 14px; line-height: 1.6;">Second point goes here</td>
</tr>
<tr>
<td style="vertical-align: top; width: 18px; color: #00498F; font-weight: 700;">•</td>
<td style="color: #374151; font-size: 14px; line-height: 1.6;">Third point goes here</td>
</tr>
</table><div style="border-left: 4px solid #00498F; padding: 4px 0 4px 18px;"> <p style="margin: 0; color: #1f2937; font-size: 17px; font-weight: 600; font-style: italic; line-height: 1.6;">“Pull-quote text goes here.”</p> </div>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 45%; vertical-align: top;">
<div style="height: 140px; background-color: #CCEBF8; border-radius: 10px; text-align: center; line-height: 140px; color: #00498F; font-weight: 700; font-size: 13px;">IMAGE</div>
</td>
<td style="width: 5%;"> </td>
<td style="width: 50%; vertical-align: top;">
<p style="margin: 0 0 8px 0; font-weight: 700; color: #111827; font-size: 15px;">Feature title</p>
<p style="margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Short description of this feature or update goes here.</p>
</td>
</tr>
</table><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 50%; vertical-align: top;">
<p style="margin: 0 0 8px 0; font-weight: 700; color: #111827; font-size: 15px;">Feature title</p>
<p style="margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Short description of this feature or update goes here.</p>
</td>
<td style="width: 5%;"> </td>
<td style="width: 45%; vertical-align: top;">
<div style="height: 140px; background-color: #E0F2DF; border-radius: 10px; text-align: center; line-height: 140px; color: #2f6a2c; font-weight: 700; font-size: 13px;">IMAGE</div>
</td>
</tr>
</table><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 48%; vertical-align: top;">
<p style="margin: 0 0 6px 0; font-weight: 700; color: #111827; font-size: 14.5px;">Column one heading</p>
<p style="margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Column one text goes here.</p>
</td>
<td style="width: 4%;"> </td>
<td style="width: 48%; vertical-align: top;">
<p style="margin: 0 0 6px 0; font-weight: 700; color: #111827; font-size: 14.5px;">Column two heading</p>
<p style="margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Column two text goes here.</p>
</td>
</tr>
</table><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 33.33%; vertical-align: top; text-align: center; padding: 0 8px;">
<span style="display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 999px; background-color: #CCEBF8; color: #00498F; font-weight: 700; font-size: 16px;">1</span>
<p style="margin: 10px 0 4px 0; font-weight: 700; color: #111827; font-size: 13.5px;">Feature one</p>
<p style="margin: 0; color: #6b7280; font-size: 12.5px; line-height: 1.5;">Short detail</p>
</td>
<td style="width: 33.33%; vertical-align: top; text-align: center; padding: 0 8px;">
<span style="display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 999px; background-color: #E0F2DF; color: #2f6a2c; font-weight: 700; font-size: 16px;">2</span>
<p style="margin: 10px 0 4px 0; font-weight: 700; color: #111827; font-size: 13.5px;">Feature two</p>
<p style="margin: 0; color: #6b7280; font-size: 12.5px; line-height: 1.5;">Short detail</p>
</td>
<td style="width: 33.33%; vertical-align: top; text-align: center; padding: 0 8px;">
<span style="display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 999px; background-color: #F2EEF5; color: #5F277E; font-weight: 700; font-size: 16px;">3</span>
<p style="margin: 10px 0 4px 0; font-weight: 700; color: #111827; font-size: 13.5px;">Feature three</p>
<p style="margin: 0; color: #6b7280; font-size: 12.5px; line-height: 1.5;">Short detail</p>
</td>
</tr>
</table><div style="height: 220px; background-color: #D1DEEB; border-radius: 12px; text-align: center; line-height: 220px; color: #00498F; font-weight: 700; font-size: 13px;">FULL-WIDTH IMAGE</div>
<div>
<div style="height: 180px; background-color: #E5F5FB; border-radius: 12px 12px 0 0; text-align: center; line-height: 180px; color: #009ADA; font-weight: 700; font-size: 13px;">IMAGE</div>
<div style="background-color: #ffffff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px; padding: 10px 16px;">
<p style="margin: 0; color: #6b7280; font-size: 12px; text-align: center;">Image caption goes here</p>
</div>
</div><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 48%; padding-bottom: 8px;"><div style="height: 100px; background-color: #FCE0D3; border-radius: 8px; text-align: center; line-height: 100px; color: #b04a1c; font-weight: 700; font-size: 11px;">IMAGE</div></td>
<td style="width: 4%;"> </td>
<td style="width: 48%; padding-bottom: 8px;"><div style="height: 100px; background-color: #CCEBF8; border-radius: 8px; text-align: center; line-height: 100px; color: #00498F; font-weight: 700; font-size: 11px;">IMAGE</div></td>
</tr>
<tr>
<td style="width: 48%;"><div style="height: 100px; background-color: #E0F2DF; border-radius: 8px; text-align: center; line-height: 100px; color: #2f6a2c; font-weight: 700; font-size: 11px;">IMAGE</div></td>
<td style="width: 4%;"> </td>
<td style="width: 48%;"><div style="height: 100px; background-color: #F2EEF5; border-radius: 8px; text-align: center; line-height: 100px; color: #5F277E; font-weight: 700; font-size: 11px;">IMAGE</div></td>
</tr>
</table><span style="display: inline-block; background-color: #009ADA; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Online</span> <span style="display: inline-block; background-color: #65BD60; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Face to face</span> <span style="display: inline-block; background-color: #F26322; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Deadline soon</span> <span style="display: inline-block; background-color: #EE3D96; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Cancelled</span> <span style="display: inline-block; background-color: #00013A; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Optional</span>
<a href="#" style="display: inline-block; background-color: #00498F; color: #ffffff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px;">Primary action</a> <a href="#" style="display: inline-block; background-color: #D1DEEB; color: #111827; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px;">Secondary action</a> <a href="#" style="display: inline-block; background-color: transparent; color: #00498F; padding: 9px 19px; border-radius: 8px; border: 1px solid #00498F; text-decoration: none; font-weight: 600; font-size: 13.5px;">Outline action</a>
<div style="background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px;">
<p style="margin: 0 0 16px 0; font-weight: 600; color: #111827; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;">In this week's update</p>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 32px; vertical-align: top; padding-bottom: 14px;">
<span style="display: inline-block; width: 24px; height: 24px; background-color: #00498F; border-radius: 999px; text-align: center; line-height: 24px; color: #ffffff; font-size: 13px; font-weight: 700;">1</span>
</td>
<td style="vertical-align: top; padding-bottom: 14px; padding-left: 10px;">
<p style="margin: 0; font-weight: 600; color: #111827;">Item title</p>
<p style="margin: 4px 0 0 0; color: #6b7280; font-size: 13.5px;">One-line description of the update</p>
</td>
</tr>
<tr>
<td style="width: 32px; vertical-align: top;">
<span style="display: inline-block; width: 24px; height: 24px; background-color: #00498F; border-radius: 999px; text-align: center; line-height: 24px; color: #ffffff; font-size: 13px; font-weight: 700;">2</span>
</td>
<td style="vertical-align: top; padding-left: 10px;">
<p style="margin: 0; font-weight: 600; color: #111827;">Second item title</p>
</td>
</tr>
</table>
</div><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 32px; vertical-align: top; padding-bottom: 14px;">
<span style="display: inline-block; width: 24px; height: 24px; background-color: #E0F2DF; border-radius: 999px; text-align: center; line-height: 24px; color: #2f6a2c; font-size: 13px;">✓</span>
</td>
<td style="vertical-align: top; padding-bottom: 14px; padding-left: 10px;">
<p style="margin: 0; font-weight: 600; color: #111827;">Benefit or feature title</p>
<p style="margin: 4px 0 0 0; color: #6b7280; font-size: 13.5px;">One-line description</p>
</td>
</tr>
<tr>
<td style="width: 32px; vertical-align: top;">
<span style="display: inline-block; width: 24px; height: 24px; background-color: #E0F2DF; border-radius: 999px; text-align: center; line-height: 24px; color: #2f6a2c; font-size: 13px;">✓</span>
</td>
<td style="vertical-align: top; padding-left: 10px;">
<p style="margin: 0; font-weight: 600; color: #111827;">Second benefit title</p>
</td>
</tr>
</table><div style="border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background-color: #ffffff;">
<table style="width: 100%; border-collapse: collapse; font-size: 12px;">
<thead>
<tr style="background-color: #F0F0F3;">
<th style="padding: 12px 14px; text-align: left; color: #6b7280; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e7eb;">Session</th>
<th style="padding: 12px 14px; text-align: left; color: #6b7280; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e7eb; width: 200px;">Format</th>
<th style="padding: 12px 14px; text-align: left; color: #6b7280; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e7eb;">Timing</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px 14px; border-bottom: 1px solid #f3f4f6; color: #111827;"><strong>Workshop name</strong></td>
<td style="padding: 12px 14px; border-bottom: 1px solid #f3f4f6;"><span style="display: inline-block; background-color: #65BD60; color: #ffffff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;">Face to face</span></td>
<td style="padding: 12px 14px; border-bottom: 1px solid #f3f4f6; color: #4b5563;">Timing detail</td>
</tr>
</tbody>
</table>
</div><div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 24px 8px 24px; background-color: #ffffff;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 20px; vertical-align: top;">
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 999px; background-color: #00498F; margin-top: 4px;"> </span>
<div style="width: 2px; height: 48px; background-color: #e5e7eb; margin-left: 5px;"> </div>
</td>
<td style="vertical-align: top; padding-left: 14px; padding-bottom: 22px;">
<p style="margin: 0; font-weight: 600; color: #111827; font-size: 14px;">Event name</p>
<p style="margin: 2px 0 0 0; color: #6b7280; font-size: 13px;">Date · time</p>
</td>
</tr>
<tr>
<td style="width: 20px; vertical-align: top;">
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 999px; background-color: #00498F; margin-top: 4px;"> </span>
</td>
<td style="vertical-align: top; padding-left: 14px; padding-bottom: 22px;">
<p style="margin: 0; font-weight: 600; color: #111827; font-size: 14px;">Second event name</p>
<p style="margin: 2px 0 0 0; color: #6b7280; font-size: 13px;">Date · time</p>
</td>
</tr>
</table>
</div><div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 20px; background-color: #ffffff;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="vertical-align: middle;">
<p style="margin: 0 0 4px 0; font-weight: 600; color: #111827; font-size: 14px;">Next session</p>
<p style="margin: 0; color: #4b5563; font-size: 13.5px;">Date · time</p>
</td>
<td style="vertical-align: middle; text-align: right;">
<a href="#" style="display: inline-block; background-color: #00498F; color: #ffffff; padding: 9px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap;">Register now</a>
</td>
</tr>
</table>
</div><div style="border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background-color: #ffffff;">
<div style="height: 110px; background-color: #CCEBF8; text-align: center; line-height: 110px; color: #00498F; font-weight: 700; font-size: 13px;">IMAGE / ICON</div>
<div style="padding: 16px 18px;">
<span style="display: inline-block; background-color: #F0F0F3; color: #374151; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px;">Category</span>
<p style="margin: 6px 0 6px 0; font-weight: 700; color: #111827; font-size: 15px;">Headline goes here</p>
<p style="margin: 0 0 12px 0; color: #6b7280; font-size: 13px;">Short summary of the news item.</p>
<a href="#" style="color: #00498F; text-decoration: none; font-weight: 600; font-size: 13px;">Read more →</a>
</div>
</div><div style="border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background-color: #ffffff;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="padding: 14px 18px; border-bottom: 1px solid #f3f4f6; vertical-align: middle;"><span style="color: #111827; font-size: 14px;">Unchecked item</span></td>
<td style="padding: 14px 18px; border-bottom: 1px solid #f3f4f6; text-align: right; width: 40px;"><span style="display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #d1d5db;"> </span></td>
</tr>
<tr>
<td style="padding: 14px 18px; vertical-align: middle;"><span style="color: #111827; font-size: 14px;">Checked item</span></td>
<td style="padding: 14px 18px; text-align: right; width: 40px;"><span style="display: inline-block; width: 18px; height: 18px; border-radius: 5px; background-color: #00498F; text-align: center; line-height: 18px; color: #ffffff; font-size: 12px;">✓</span></td>
</tr>
</table>
</div><table style="width: 100%; border-collapse: collapse; text-align: center;">
<tr>
<td style="width: 33.33%;">
<p style="margin: 0; color: #00498F; font-size: 26px; font-weight: 700;">1,200</p>
<p style="margin: 4px 0 0 0; color: #6b7280; font-size: 12px;">Members</p>
</td>
<td style="width: 33.33%;">
<p style="margin: 0; color: #00498F; font-size: 26px; font-weight: 700;">48</p>
<p style="margin: 4px 0 0 0; color: #6b7280; font-size: 12px;">Events run</p>
</td>
<td style="width: 33.33%;">
<p style="margin: 0; color: #00498F; font-size: 26px; font-weight: 700;">96%</p>
<p style="margin: 4px 0 0 0; color: #6b7280; font-size: 12px;">Satisfaction</p>
</td>
</tr>
</table><div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px 24px; background-color: #ffffff;"> <p style="margin: 0 0 6px 0; font-weight: 700; color: #111827; font-size: 14px;">Question goes here?</p> <p style="margin: 0 0 18px 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Answer text goes here, explaining the answer in a sentence or two.</p> <p style="margin: 0 0 6px 0; font-weight: 700; color: #111827; font-size: 14px;">Second question goes here?</p> <p style="margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.6;">Answer text goes here.</p> </div>
<div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; background-color: #ffffff;">
<p style="margin: 0 0 16px 0; color: #1f2937; font-size: 15px; font-style: italic; line-height: 1.6;">“This is where a short customer or member testimonial goes — a sentence or two about their experience.”</p>
<table style="border-collapse: collapse;">
<tr>
<td style="width: 36px;"><span style="display: inline-block; width: 36px; height: 36px; border-radius: 999px; background-color: #D1DEEB; text-align: center; line-height: 36px; color: #00498F; font-weight: 700; font-size: 13px;">JD</span></td>
<td style="padding-left: 10px; vertical-align: middle;">
<p style="margin: 0; font-weight: 700; color: #111827; font-size: 13px;">Jane Doe</p>
<p style="margin: 0; color: #9ca3af; font-size: 12px;">Role, Organisation</p>
</td>
</tr>
</table>
</div><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 56px; vertical-align: top;">
<span style="display: inline-block; width: 48px; height: 48px; border-radius: 999px; background-color: #E2D8E8; text-align: center; line-height: 48px; color: #5F277E; font-weight: 700; font-size: 15px;">AB</span>
</td>
<td style="vertical-align: top; padding-left: 12px;">
<p style="margin: 0; font-weight: 700; color: #111827; font-size: 14px;">Author name</p>
<p style="margin: 2px 0 8px 0; color: #9ca3af; font-size: 12.5px;">Job title</p>
<p style="margin: 0; color: #6b7280; font-size: 13px; line-height: 1.6;">Short author bio goes here — a sentence about who they are.</p>
</td>
</tr>
</table><div style="background-color: #00013A; border-radius: 12px; padding: 24px 28px;"> <p style="margin: 0 0 8px 0; font-weight: 600; color: #99B6D2; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;">Quote of the week</p> <p style="margin: 0 0 18px 0; color: #f9fafb; font-size: 20px; font-weight:700; line-height: 1.5;">“Quote text.”</p> <p style="margin: 0; color: #fff; font-size: 13px;">Attribution</p> </div>
<div style="border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background-color: #ffffff;">
<div style="height: 140px; background-color: #F0F0F3; text-align: center; line-height: 140px; color: #6b7280; font-weight: 700; font-size: 13px;">PRODUCT IMAGE</div>
<div style="padding: 18px;">
<p style="margin: 0 0 4px 0; font-weight: 700; color: #111827; font-size: 15px;">Product name</p>
<p style="margin: 0 0 12px 0; color: #6b7280; font-size: 13px;">Short one-line product description.</p>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="vertical-align: middle;"><p style="margin: 0; color: #00498F; font-size: 17px; font-weight: 700;">£49.00</p></td>
<td style="vertical-align: middle; text-align: right;"><a href="#" style="display: inline-block; background-color: #00498F; color: #ffffff; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;">Shop now</a></td>
</tr>
</table>
</div>
</div><table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; text-align: center;">
<p style="margin: 0 0 4px 0; font-weight: 700; color: #111827; font-size: 14px;">Standard</p>
<p style="margin: 0 0 14px 0; color: #00013A; font-size: 26px; font-weight: 700;">£99</p>
<a href="#" style="display: inline-block; background-color: #D1DEEB; color: #111827; padding: 8px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 12.5px;">Choose plan</a>
</div>
</td>
<td style="width: 4%;"> </td>
<td style="width: 48%; vertical-align: top;">
<div style="border: 2px solid #00498F; border-radius: 12px; padding: 22px; text-align: center;">
<p style="margin: 0 0 4px 0; font-weight: 700; color: #00498F; font-size: 14px;">Premium</p>
<p style="margin: 0 0 14px 0; color: #00013A; font-size: 26px; font-weight: 700;">£149</p>
<a href="#" style="display: inline-block; background-color: #00498F; color: #ffffff; padding: 8px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 12.5px;">Choose plan</a>
</div>
</td>
</tr>
</table><div style="border: 2px dashed #F26322; border-radius: 12px; padding: 20px; text-align: center; background-color: #FEEFE9;"> <p style="margin: 0 0 6px 0; color: #b04a1c; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;">Your discount code</p> <p style="margin: 0 0 10px 0; color: #00013A; font-size: 22px; font-weight: 700; letter-spacing: 0.05em;">SAVE20</p> <p style="margin: 0; color: #6b7280; font-size: 12.5px;">Valid until the end of the month</p> </div>
<div style="background-color: #00013A; border-radius: 12px; padding: 22px; text-align: center;">
<p style="margin: 0 0 12px 0; color: #99D7F0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;">Offer ends soon</p>
<table style="margin: 0 auto; border-collapse: collapse;">
<tr>
<td style="padding: 0 10px; text-align: center;"><p style="margin: 0; color: #fff; font-size: 22px; font-weight: 700;">02</p><p style="margin: 2px 0 0 0; color: #99B6D2; font-size: 10.5px;">DAYS</p></td>
<td style="padding: 0 10px; text-align: center;"><p style="margin: 0; color: #fff; font-size: 22px; font-weight: 700;">14</p><p style="margin: 2px 0 0 0; color: #99B6D2; font-size: 10.5px;">HOURS</p></td>
<td style="padding: 0 10px; text-align: center;"><p style="margin: 0; color: #fff; font-size: 22px; font-weight: 700;">36</p><p style="margin: 2px 0 0 0; color: #99B6D2; font-size: 10.5px;">MINS</p></td>
</tr>
</table>
</div><div style="padding: 16px 18px; background-color: #CCEBF8; border-radius: 12px;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 22px; vertical-align: top; padding-top: 1px;">
<span style="display: inline-block; width: 20px; height: 20px; background-color: #009ADA; border-radius: 999px; text-align: center; line-height: 20px; color: #ffffff; font-size: 12px; font-weight: 700;">i</span>
</td>
<td style="vertical-align: top; padding-left: 10px; color: #111827;">
<strong>Info:</strong> message text goes here.
</td>
</tr>
</table>
</div><div style="padding: 16px 18px; background-color: #FCE0D3; border-radius: 12px;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 22px; vertical-align: top; padding-top: 1px;">
<span style="display: inline-block; width: 20px; height: 20px; background-color: #F26322; border-radius: 999px; text-align: center; line-height: 20px; color: #ffffff; font-size: 12px; font-weight: 700;">!</span>
</td>
<td style="vertical-align: top; padding-left: 10px; color: #111827;">
<strong>Warning:</strong> message text goes here.
</td>
</tr>
</table>
</div><div style="padding: 16px 18px; background-color: #E0F2DF; border-radius: 12px;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 22px; vertical-align: top; padding-top: 1px;">
<span style="display: inline-block; width: 20px; height: 20px; background-color: #65BD60; border-radius: 999px; text-align: center; line-height: 20px; color: #ffffff; font-size: 12px; font-weight: 700;">✓</span>
</td>
<td style="vertical-align: top; padding-left: 10px; color: #111827;">
<strong>Success:</strong> message text goes here.
</td>
</tr>
</table>
</div><div style="padding: 16px 18px; background-color: #FCD8EA; border-radius: 12px;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 22px; vertical-align: top; padding-top: 1px;">
<span style="display: inline-block; width: 20px; height: 20px; background-color: #EE3D96; border-radius: 999px; text-align: center; line-height: 20px; color: #ffffff; font-size: 12px; font-weight: 700;">×</span>
</td>
<td style="vertical-align: top; padding-left: 10px; color: #111827;">
<strong>Danger:</strong> message text goes here.
</td>
</tr>
</table>
</div><table style="margin: 0 auto; border-collapse: collapse;">
<tr>
<td style="padding: 0 6px;"><a href="#" style="display: inline-block; width: 32px; height: 32px; border-radius: 999px; background-color: #00498F; color: #ffffff; text-align: center; line-height: 32px; font-size: 13px; font-weight: 700; text-decoration: none;">f</a></td>
<td style="padding: 0 6px;"><a href="#" style="display: inline-block; width: 32px; height: 32px; border-radius: 999px; background-color: #00498F; color: #ffffff; text-align: center; line-height: 32px; font-size: 13px; font-weight: 700; text-decoration: none;">X</a></td>
<td style="padding: 0 6px;"><a href="#" style="display: inline-block; width: 32px; height: 32px; border-radius: 999px; background-color: #00498F; color: #ffffff; text-align: center; line-height: 32px; font-size: 13px; font-weight: 700; text-decoration: none;">in</a></td>
<td style="padding: 0 6px;"><a href="#" style="display: inline-block; width: 32px; height: 32px; border-radius: 999px; background-color: #00498F; color: #ffffff; text-align: center; line-height: 32px; font-size: 13px; font-weight: 700; text-decoration: none;">ig</a></td>
</tr>
</table><div style="text-align: center; padding: 4px 0;"> <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 13px;">Know someone who'd find this useful?</p> <a href="#" style="display: inline-block; background-color: #D1DEEB; color: #111827; padding: 9px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;">Forward this email</a> </div>
<div style="height: 32px; line-height: 32px; font-size: 1px;"> </div>
<div style="padding: 4px 0;"><hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0;"></div>
<div style="padding-top: 4px;"> <p style="margin: 0; color: #6b7280; font-size: 14px;">Best wishes,<br /><strong style="color: #111827;">The team</strong></p> </div>
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; text-align: center;"> <p style="margin: 0 0 6px 0; color: #9ca3af; font-size: 11.5px; line-height: 1.6;">Organisation Name, Address Line 1, City, Postcode</p> <p style="margin: 0; color: #9ca3af; font-size: 11.5px;"><a href="#" style="color: #9ca3af; text-decoration: underline;">Unsubscribe</a> · <a href="#" style="color: #9ca3af; text-decoration: underline;">Update preferences</a> · © 2026 Organisation Name</p> </div>
Build
Pick components from the palette to add them to your email, click directly on any text in the preview to edit it, reorder or remove blocks, then copy or download the finished HTML.
No blocks yet. Add components from the palette or from the Component Library.