Skip to content

Instantly share code, notes, and snippets.

@barnettjw
Created September 20, 2022 21:29
Show Gist options
  • Save barnettjw/80c3f39b2aea35412461c88dbca40c91 to your computer and use it in GitHub Desktop.
Save barnettjw/80c3f39b2aea35412461c88dbca40c91 to your computer and use it in GitHub Desktop.
HTML Email Template
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no" />
<!--[if mso]>
<style type="text/css">
table { border-collapse: collapse;}
</style>
<![endif]-->
<style>
/* reset */
html,
body,
div table,
tr,
td,
h1,
h2,
ul,
li {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
background-color: #e0e0e0;
background: white\0/;
}
/* wrapper styles */
.wrapper {
width: 100%;
background-color: #e0e0e0;
background: white\0/;
}
.wrapper table {
width: 600px;
background-color: white;
}
/* general styles */
.header h1 {
padding: 0;
margin: 0;
}
.header h2 {
padding: 0;
margin: 0;
}
.body p {
margin: 15px 0;
}
.body p:first-child,
.closing p:first-child {
padding-top: 20px;
}
.closing p {
margin: 0;
}
.footer p {
margin: 3px 0;
}
.footer td {
padding-bottom: 25px;
}
/* table styles */
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
margin: 0;
padding: 0 40px;
}
.header table {
margin-top: 25px;
}
.header td {
padding-top: 25px;
}
.footer table {
margin-bottom: 25px;
}
/* typography styles */
a {
color: #00538b;
text-decoration: underline;
}
a[href="#"]{
color: #000;
text-decoration: none;
}
.body strong {
color: #00538b;
}
p, h1, h2, h3, h4 {
line-height: 25px;
font-family: Arial, San-Serif;
}
.header h1 {
font-size: 25px;
font-weight: bold;
color: #00b0f0;
}
.footer-heading, .header h2 {
color: #00538b;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<table class="wrapper">
<tr class="header" align="center">
<td>
<table>
<tr>
<td>
<h1>Title message</h1>
<h2>a message from IT Dept</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr class="body" align="center">
<td>
<table>
<tr>
<td>
<p>Content goes here.</p>
<p><strong>Go here:</p>
<p><a href='https://help.example.com'>intranet page</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr class="closing" align="center">
<td>
<table>
<tr>
<td>
<p>Thank you,</p>
<p>IT Dept</p>
</td>
</tr>
</table>
</td>
</tr>
<tr class="footer" align="center">
<td>
<table>
<tr align="center">
<td>
<h4 class="footer-heading">Contacting the IT Dept</h4>
<p><strong>Phone: </strong><a href='#'>+1 555-123-4567</a></p>
<p><strong>Email: </strong><a href="mailto:help@example.com">help@example.com</a></p>
<p><strong>Website: </strong><a href="https://help.example.com">https://help.example.com</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment