Skip to content

Instantly share code, notes, and snippets.

@rousan

rousan/Email Body HTML Sample

Created February 13, 2020 16:10
Show Gist options
  • Save rousan/e3e834d74ff0f66bafe6cd547e815778 to your computer and use it in GitHub Desktop.
Save rousan/e3e834d74ff0f66bafe6cd547e815778 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Email Body HTML Sample
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<title>Episteme Digest</title>
<style>
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style type="text/css">
html,
body {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
font-weight: 400;
background-color: #FFFFFF;
}
body {
margin: 0;
padding: 0;
}
table,
td,
tr {
vertical-align: top;
border-collapse: collapse;
}
tr {
background-color: #FFFFFF;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: none !important;
}
.main-header-text {
font-weight: bold;
font-size: 18px;
line-height: 160%;
letter-spacing: 0.05em;
color: #404040;
margin: 0;
}
.divider {
margin: 20px 0;
}
.divider td {
background-color: #e8e7e7;
}
p {
color: #262B2E;
font-weight: normal;
font-weight: 400;
}
a {
text-decoration: none;
}
.btn {
background-color: #1200EE;
border-radius: 7px;
border: none;
height: 35px;
}
.btn a {
color: #FFFFFF;
font-size: 15px;
font-style: normal;
font-weight: bold;
padding: 0 50px;
}
.posts-col-title {
font-size: 14px;
line-height: 160%;
color: #636363;
}
.post-container {
margin: 15px 0;
}
.post-title {
margin: 0;
}
.post-title a {
font-style: normal;
font-weight: bold;
font-size: 15px;
color: #000000;
line-height: 160%;
}
.post-desc {
line-height: 160%;
margin: 7px 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 50px;">
<tr bgcolor="#FFFFFF">
<td align="center" valign="middle">
<table width="700" cellspacing="0" cellpadding="0" border="1" style="border: 1px solid #e8e7e7;">
<tr>
<td align="center" valign="middle">
<table width="500" cellspacing="0" cellpadding="0" style="margin: 60px 0;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<h2 class="main-header-text">
Your Daily Digest
</h2>
</td>
</tr>
<tr>
<td>
<table class="divider" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<p>Hi {{ getName user }}</p>
<p style="line-height: 160%; margin-bottom: 25px;">
{{{ genAchievementStr updates.metrics }}}
<span style="color: #262B2E;">
Feel free to share your learnings and curation around anything you learned
and researched recently with your followers and the community.
</span>
</p>
</td>
</tr>
<tr>
<td align="left" valign="middle">
{{#if (anyTrue (hasAnyPosts updates.topPostsFromFollowingUsers) (hasAnyPosts updates.topPostsFromTopics) ) }}
<button class="btn">
<a href="https://episteme.io/" class="link">
Create
</a>
</button>
{{else}}
<span></span>
{{/if}}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="divider" width="100%" cellspacing="0" cellpadding="0" border="0"
style="margin: 40px 0;">
<tr>
<td height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
{{#if (hasAnyPosts updates.topPostsFromFollowingUsers) }}
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<span class="posts-col-title">
People you follow
</span>
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
{{#each updates.topPostsFromFollowingUsers}}
<tr>
<td>
<table class="post-container" width="100%" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td>
<h4 class="post-title">
<a href="{{ this.absUrl }}">
{{ this.content.title }}
</a>
</h4>
</td>
</tr>
<tr>
<td>
<p class="post-desc">
{{ this.content.desc }}
</p>
</td>
</tr>
</table>
</td>
</tr>
{{/each}}
</table>
</td>
</tr>
</table>
{{else}}
<span></span>
{{/if}}
</td>
</tr>
<tr>
<td>
{{#if (hasAnyPosts updates.topPostsFromFollowingUsers)}}
{{#if (hasAnyPosts updates.topPostsFromTopics)}}
<table class="divider" width="100%" cellspacing="0" cellpadding="0" border="0"
style="margin: 20px 0 40px 0;">
<tr>
<td height="1"></td>
</tr>
</table>
{{else}}
<span></span>
{{/if}}
{{else}}
<span></span>
{{/if}}
</td>
</tr>
<tr>
<td>
{{#if (hasAnyPosts updates.topPostsFromTopics)}}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 15px;">
<tr>
<td>
<span class="posts-col-title">
Topics you follow
</span>
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
{{#each updates.topPostsFromTopics}}
<tr>
<td>
<table class="post-container" width="100%" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td>
<h4 class="post-title">
<a href="{{ this.absUrl }}">
{{ this.content.title }}
</a>
</h4>
</td>
</tr>
<tr>
<td>
<p class="post-desc">
{{ this.content.desc }}
</p>
</td>
</tr>
</table>
</td>
</tr>
{{/each}}
</table>
</td>
</tr>
</table>
{{else}}
<span></span>
{{/if}}
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<button class="btn">
<a href="https://episteme.io/" class="link">
Create your own
</a>
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment