Skip to content

Instantly share code, notes, and snippets.

@brendanc
Created October 11, 2023 00:55
Show Gist options
  • Select an option

  • Save brendanc/ce77d2cee08a4d468ed6949b95d3107c to your computer and use it in GitHub Desktop.

Select an option

Save brendanc/ce77d2cee08a4d468ed6949b95d3107c to your computer and use it in GitHub Desktop.
Litmus template email
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
{{Standard Meta and Head}}
{{Standard Litmus Brand CSS Styles}}
<!--mobile styles-->
{{Standard Mobile CSS Styles}}
<style>
@media screen and (max-width:600px) {
/*additional mobile CSS*/
}
</style>
<!--dark mode styles-->
{{Standard Dark Mode CSS Styles}}
<style>
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
@media (prefers-color-scheme: dark) {
.dark-grad { background-color: #262424 !important;background: linear-gradient(#10618A 4.01%, #262524 27.96%) !important; }
}
</style>
<style>
u + .body .dark-grad { background: #F1F5F9 !important; }
</style>
</head>
<body id="body" class="darkmode2 body" bgcolor="#ffffff" style="background-color:#ffffff;">
<div role="article" aria-roledescription="email" aria-label="Email from Litmus" xml:lang="en" lang="en">
<!--hidden preheader with pre-header spacer hack-->
<div class="litmus-builder-preview-text" style="display:none;">Dark Mode-ready, responsive, and Litmus-tested. &#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;&#847;&zwnj;&nbsp;&#8199;&#65279;</div>
<!--start of email-->
<table class="darkmode2" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%; background-color: #ffffff;">
<!--header-->
{{Global - Flexible}}
<!--main content area-->
<tr>
<td class="dark-grad" align="center" valign="top" style="background-color: #DDEEEB;">
<div class="mktoText" id="content" mktoname="content">
<table class="wInner" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
<!--Pyramid Hero-->
<tr>
<td align="center" valign="top" style="padding-top: 60px;">
<!--eyebrow preheader-->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="right" valign="middle">
<p aria-hidden="true" class="accent" style="font-size: 20px; line-height: 24px; font-weight:bold; color: #262524;">&bull;&nbsp;</p>
</td>
<td align="center" valign="middle">
<p style="font-size: 20px; line-height: 24px; font-weight:bold; text-transform: uppercase; color: #262524;">
Templates
</p>
</td>
<td align="left" valign="middle">
<p aria-hidden="true" class="accent" style="font-size: 20px; line-height: 24px; font-weight:bold; color: #262524;">&nbsp;&bull;</p>
</td>
</tr>
</table>
<!--end eyebrow preheader-->
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 40px 0 0;">
<!--h1-->
<h1 class="jumbo"><a href="https://img.kickdyn.com/clickimgpoll.ashx?c=16461.mGD2t3zGFLotdUlvegP7&a=1&utm_content=headline" style="color: #262524;">Pre-built Templates You Can Trust</a></h1>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 30px 0 0;">
<p class="subhead">Designed by email marketers,<br />for email marketers</p>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 30px 0 0;">
<!--cta-->
<a href="https://img.kickdyn.com/clickimgpoll.ashx?c=16461.mGD2t3zGFLotdUlvegP7&a=1&utm_content=top_cta" class="cta btn-orange" style="background-color: #DD7322;background-image:linear-gradient(#DD7322,#DD7322); color: #ffffff;"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt">&nbsp;</i><![endif]--><span style="mso-text-raise:15pt;"><span class="gmail-screen"><span class="gmail-difference">Get yours today</span></span></span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 50px 0 0; mso-padding-alt: 20px 0 0;">
<!--Image -->
<a href="https://img.kickdyn.com/clickimgpoll.ashx?c=16461.mGD2t3zGFLotdUlvegP7&a=1&utm_content=image" style="text-decoration: none;"><img class="fadeimg desktop" src="https://campaigns.litmus.com/_email/2023/October/2023-10-Template_Hub/202310_tempaltes_hero_light.png" width="600" height="300" alt="5 email templates that are moving up the image." style="width: 100%; max-width: 600px; height: auto;" />
<!--[if !mso]><! -->
<img class="mobile" src="https://campaigns.litmus.com/_email/2023/October/2023-10-Template_Hub/202310_templates_hero_dark.png" width="335" height="120" alt="5 email templates that are moving up the image." style="text-decoration: none; display: none; width: 100%; height: auto;" border="0" />
<!--<![endif]-->
</a>
</td>
</tr>
<!--end pyramid hero-->
<tr>
<td align="left" valign="top" style="padding: 50px 0 0;">
<!--Paragraph block-->
<p style="text-align: left;">Coding an email that displays perfectly in a gazillion different email clients and devices is hard, time-consuming, and not in everyone&rsquo;s wheelhouse. And that&rsquo;s okay!<br /><br />But you still want to create mobile-friendly, responsive, and Dark Mode-ready emails, right? <strong>You need an email template.</strong> Or maybe a suite of email templates, Litmus-tested and approved by our very own email artisans.<br /><br />Whether you&rsquo;re sending newsletters, order confirmations, or need a facelift for your transactional emails, you&rsquo;ll find what you&rsquo;re looking for in <strong>Litmus&rsquo; Free Email Templates Hub.</strong></p>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 30px 0 0;">
<!--cta-->
<a href="https://img.kickdyn.com/clickimgpoll.ashx?c=16461.mGD2t3zGFLotdUlvegP7&a=1&utm_content=bottom_cta" class="cta btn-orange" style="background-color: #DD7322;background-image:linear-gradient(#DD7322,#DD7322); color: #ffffff;"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt">&nbsp;</i><![endif]--><span style="mso-text-raise:15pt;"><span class="gmail-screen"><span class="gmail-difference">Head to the hub</span></span></span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 50px 0 0;">
<img src="https://img.kickdyn.com/imgpoll.png?c=16461.mGD2t3zGFLotdUlvegP7&a=1" width="335" height="94" alt="Join the pack of email geeks exploring email workflow trends" style="width: 100%; max-width: 335px; height: auto; display: inline; margin: 0; padding: 0; vertical-align: -5px;" border="0" />
</td>
</tr>
<tr>
<td aria-hidden="true" align="left" valign="top" style="font-size:60px;line-height:60px;mso-line-height-rule: exactly;">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<!--footer-->
<tr>
<td align="center" style="padding: 0px 15px;">
<div class="mktoText" id="footer" mktoname="footer">
<table role="presentation" class="wMobile" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 600px;">
<tr>
<td class="footer" align="center" style="padding: 60px 0;">
<p style="margin:0 auto 30px;">You&rsquo;re receiving this email because you signed up to receive promotional emails from Litmus. If you&rsquo;d prefer not to receive emails, you can <a href="https://{{my.emailPreferences}}" style="color: #4B525D;">update your preferences</a>.</p>
{{Footer - light}}
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
{{Standard Analytics}}
<style data-ignore-inlining>@media (prefers-color-scheme: dark) { #_t::before {content:url('https://eou1014l.emltrk.com/v2/eou1014l?rd&i={{lead.ID}}');}} @media (prefers-color-scheme: light) { #_t::before {content:url('https://eou1014l.emltrk.com/v2/eou1014l?rl&i={{lead.ID}}');}} @media print{ #_t {background-image:url('https://eou1014l.emltrk.com/v2/eou1014l?p&i={{lead.ID}}');}} div.OutlookMessageHeader {background-image:url('https://eou1014l.emltrk.com/v2/eou1014l?f&i={{lead.ID}}')} table.moz-email-headers-table {background-image:url('https://eou1014l.emltrk.com/v2/eou1014l?f&i={{lead.ID}}')} blockquote #_t {background-image:url('https://eou1014l.emltrk.com/v2/eou1014l?f&i={{lead.ID}}')} #MailContainerBody #_t {background-image:url('https://eou1014l.emltrk.com/v2/eou1014l?f&i={{lead.ID}}')}</style><div id="_t"></div>
<img src="https://eou1014l.emltrk.com/v2/eou1014l?i={{lead.ID}}" width="1" height="1" border="0" alt="" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment