We have 3 default HTML templates for you to choose from: Modern, Classic, and Text Only.
Here you'll find the source code & preview images for each. Of course, these may only be a starting point for you! While you're welcome to use them as-is, we also encourage you to customize their styling to your liking.
NOTE: Not sure how to make use of these in your account? Check out our custom HTML template tutorial here! And don't forget that you don't have to use HTML to customize your template — if you prefer, we have a visual template editor as well.
Modern
For a clean sans-serif look, with built-in button & text styling.
<style>
.message-content {
max-width: 600px;
margin: 30px auto;
font-family: Helvetica, Arial, sans-serif;
}
.message-content div {
padding-bottom: 10px;
}
.message-content img {
max-width: 100%;
height: auto;
margin: 0 auto;
}
* {
font-family: Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
p,
li,
ul,
ol,
div {
font-size: 18px;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
color: #333333;
}
p *,
li * {
color: inherit;
font-family: inherit;
font-size: inherit;
}
p,
ul,
ol {
margin-bottom: 1em;
}
blockquote {
border-left: solid 5px #aaa;
margin: 20px 0px;
padding: 15px 30px;
font-size: 20px;
line-height: 1.5em;
color: #444;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px dotted #0875c1;
color: #0875c1;
}
a:hover {
color: #1b8ede;
border-bottom-color: #1b8ede;
}
.button {
border: none;
background: #777;
color: #fff;
padding: 10px;
display: inline-block;
margin: 10px 0px;
font-family: Helvetica, Arial, sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.button:hover {
color: #fff;
background: #666;
}
.footer {
border-top: 1px dotted #888;
padding: 20px 0px;
font-family: Helvetica, Arial, sans-serif;
color: #aaa;
font-size: 12px;
}
.social-links {
margin-bottom: 10px;
padding: 0px;
}
.social-links a {
text-align: center;
padding: 5px;
border: none;
}
</style>
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div class="message-content">
{{ message_content }}
<div class="footer">
<a href="{{ unsubscribe_url }}">Unsubscribe</a> |
<a href="{{ subscriber_preferences_url }}">Update your profile</a> | {{ address }}
</div>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
Classic
Nearly identical to Modern, but featuring a classy serif typeface. 🎩
<style>
.message-content {
max-width: 600px;
margin: 30px auto;
font-family: Georgia, Times, serif;
}
.message-content div {
padding-bottom: 10px;
}
.message-content img {
max-width: 100%;
height: auto;
}
* {
font-family: Georgia, Times, serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
p,
li,
ul,
ol,
div {
font-size: 18px;
line-height: 1.5em;
font-family: Georgia, Times, serif;
color: #333333;
}
p *,
li * {
color: inherit;
font-family: inherit;
font-size: inherit;
}
p,
ul,
ol {
margin-bottom: 1em;
}
blockquote {
border-left: solid 5px #aaa;
margin: 20px 0px;
padding: 15px 30px;
font-size: 20px;
line-height: 1.5em;
font-style: italic;
color: #444;
font-family: Georgia, Times, serif;
}
a {
text-decoration: none;
border-bottom: 1px dotted #0875c1;
color: #0875c1;
}
a:hover {
color: #1b8ede;
border-bottom-color: #1b8ede;
}
.button {
border: none;
background: #777;
color: #fff;
padding: 10px;
display: inline-block;
margin: 10px 0px;
font-family: Helvetica, Arial, sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.button:hover {
color: #fff;
background: #666;
}
.footer {
border-top: 1px dotted #888;
padding: 20px 0px;
font-family: Helvetica, Arial, sans-serif;
color: #aaa;
font-size: 12px;
}
.social-links {
margin-bottom: 10px;
padding: 0px;
}
.social-links a {
text-align: center;
padding: 5px;
border: none;
}
</style>
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div class="message-content">
{{ message_content }}
<div class="footer">
<a href="{{ unsubscribe_url }}">Unsubscribe</a> |
<a href="{{ subscriber_preferences_url }}">Update your profile</a> | {{ address }}
</div>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
Text Only
Sometimes, simple is best! This is our most 'stripped-down' option, without any bells or whistles.
<style>
[data-slate-editor] { padding: 30px; }
.message-content { max-width: 600px; }
.message-content div { padding-bottom: 10px; }
.message-content img { max-width: 100%; height: auto; }
p {
margin-bottom: 1em;
}
</style>
<div class='message-content'>
{{ message_content }}
<br>
<br>
<small>
{{ unsubscribe_link }} | {{ subscriber_preferences_link }} | {{ address }}
<br>
</small>
</div>
Once you're ready to add your personal touch, check out our tutorial below! 👇