Learn How to Build Modular Email Templates with Full Code Examples
Table of contents
Modular design is like building a system with independent blocks brick by brick. Instead of creating every email from scratch, you create a library of reusable, pre-designed, standardized modules that can be used together, improve independently, and match each other in design.
The small parts of this modularization we call modules are building bricks of your email templates. They can be nested to create a bigger module like a header, or can be as small as just a heading. Each module works with each other in harmony that is consistent, scalable, and easily improved.
We'll explain modular email design later on, but it's better to show than tell. Let's look at some modular HTML email templates.
Modular Email Templates
1. Modular Transactional Email Template
First, look at the HTML head, which consists of global branding with fonts, specific line breaks, etc.
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table {
border-collapse: separate;
table-layout: fixed;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
table td {
border-collapse: collapse
}
.ExternalClass {
width: 100%
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
body, a, li, p, h1, h2, h3 {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: none !important
}
body, #innerTable {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#innerTable img+div {
display: none;
display: none !important
}
img {
Margin: 0;
padding: 0;
-ms-interpolation-mode: bicubic
}
h1, h2, h3, p, a {
line-height: inherit;
overflow-wrap: normal;
white-space: normal;
word-break: break-word
}
a {
text-decoration: none
}
h1, h2, h3, p {
min-width: 100%!important;
width: 100%!important;
max-width: 100%!important;
display: inline-block!important;
border: 0;
padding: 0;
margin: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a[href^="mailto"],
a[href^="tel"],
a[href^="sms"] {
color: inherit;
text-decoration: none
}
</style>
<style type="text/css">
@media (min-width: 481px) {
.hd { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.hm { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>This is complicated and overly long HTML code, right? But fear not—with Tabular's drag-and-drop email builder, you can create responsive email templates in no time.
Module 1: Email Header
The second in our list is the header, but in the context of emails, an email header can mean both the identification of the sender and receiver or just the header of your design.
The header usually consists of a logo, brand name, and a navigation bar, but for this example, we only have a logo.
<!--
* This email was built using Tabular.
* For more information, visit https://tabular.email
-->
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Logo Module Test</title> <meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable"> <tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t144" style="width:600px; max-width: 600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="left"> <table class="t4" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="40" class="t3" style="width:40px;">
<table class="t2" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t1">
<div style="font-size:0px;">
<img class="t0" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="40" height="40" alt="Company Logo" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/68a054d9-87f1-4592-b790-30dcd88058c9.png"/>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>The modular design aspect of this is that the header. It can be modified to include all elements, even the logo can be changed. This complementary structure is possible with nesting, including small modules in the bigger modules.
Module 2: Main Headline
In this module, we have an action “transferred,” a subject “payment,” and an object “$9.99 USD,” and an indirect object “pumpkin spices,” which all can be personalized using variables. As you can see, this wasn’t an issue with header design, but in the email body, there are modules that need different interests. The beauty of modular design shines in these situations where you can edit a specific module without disrupting the entire template.
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t144" style="width:600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t10" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="570" class="t9" style="width:600px;"> <table class="t8" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t7">
<h1 class="t6" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:39px;font-weight:600;font-style:normal;font-size:34px;text-decoration:none;text-transform:none;letter-spacing:-1.36px;direction:ltr;color:#0046FF;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">You transfered a payment of $9.99 USD to Pumpkin Services Inc.</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div>
</body>
</html>Module 3: Introductory Text
A generic disclaimer that you can use in specific emails but not in promotional emails.
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t144" style="width:600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="left">
<table class="t16" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="570" class="t15" style="width:600px;"> <table class="t14" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t13">
<p class="t12" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">It can take some time before this transaction is visible on your account. The amount will be deducted from your account in the coming 1-2 working days. Be sure to have sufficient credit in your account to prevent possible costs.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div>
</body>
</html>Module 4: Transaction Details Block
Here is another important section where each email content actually has to be personal, like transaction ID, date, and invoice reference. The variables are each a module inside of a module that is nested. It may not be a block that you'll utilize in promotional emails, but surely you'll need this a lot in transactional emails.
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t144" style="width:600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t116" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="570" class="t115" style="background-color:#0044FF;overflow:hidden;width:600px;border-radius:12px 12px 12px 12px;"> <table class="t114" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t113" style="padding:30px 35px 30px 35px;">
<div class="t111" style="width:100%;text-align:left;">
<div class="t110" style="display:inline-block;">
<table class="t109" role="presentation" cellpadding="0" cellspacing="0" align="left" valign="top">
<tr class="t108">
<td></td>
<td class="t73" width="250" valign="top">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t72" style="width:100%;">
<tr>
<td class="t71" style="padding:0 5px 0 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t32" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t31" style="width:800px;"> <table class="t30" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t29">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t22" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t21" style="width:600px;"> <table class="t20" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t19"><p class="t18" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:600;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;letter-spacing:-0.64px;direction:ltr;color:#F7F7F7;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Transaction ID</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t24" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t28" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t27" style="width:600px;"> <table class="t26" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t25"><p class="t23" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">1JX12314128K723452D</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t50" style="mso-line-height-rule:exactly;mso-line-height-alt:15px;line-height:15px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t54" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t53" style="width:800px;"> <table class="t52" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t51">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t37" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t36" style="width:600px;"> <table class="t35" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t34"><p class="t33" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:600;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;letter-spacing:-0.64px;direction:ltr;color:#F7F7F7;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Store</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t39" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t43" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t42" style="width:600px;"> <table class="t41" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t40"><p class="t38" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Pumpkin Services Inc.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t45" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t49" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t48" style="width:600px;"> <table class="t47" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t46"><p class="t44" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">https://pumpkin.com/bill</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t66" style="mso-line-height-rule:exactly;mso-line-height-alt:15px;line-height:15px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t70" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t69" style="width:800px;"> <table class="t68" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t67">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t59" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t58" style="width:600px;"> <table class="t57" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t56"><p class="t55" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:600;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;letter-spacing:-0.64px;direction:ltr;color:#F7F7F7;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Invoice reference</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t61" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t65" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t64" style="width:600px;"> <table class="t63" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t62"><p class="t60" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">MTVZ5V9JL7a0</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="t107" width="250" valign="top">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t106" style="width:100%;">
<tr>
<td class="t105" style="padding:0 0 0 5px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t88" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t87" style="width:800px;"> <table class="t86" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t85">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t78" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t77" style="width:600px;"> <table class="t76" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t75"><p class="t74" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:600;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;letter-spacing:-0.64px;direction:ltr;color:#F7F7F7;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Transaction date</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t80" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t84" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t83" style="width:600px;"> <table class="t82" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t81"><p class="t79" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">17 Oct. 2022 11:27:03</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t100" style="mso-line-height-rule:exactly;mso-line-height-alt:15px;line-height:15px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t104" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t103" style="width:800px;"> <table class="t102" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t101">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t93" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t92" style="width:600px;"> <table class="t91" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t90"><p class="t89" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:600;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;letter-spacing:-0.64px;direction:ltr;color:#F7F7F7;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Store notes</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t95" style="mso-line-height-rule:exactly;mso-line-height-alt:5px;line-height:5px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t99" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="245" class="t98" style="width:600px;"> <table class="t97" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t96"><p class="t94" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#F8F8F8;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">You did not add any notes.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div>
</body>
</html>Module 5: Support/Information Section
Again, a disclaimer that can be used in specific transactional emails but not all. This is the beauty of modular design—it does not comprehend a single purpose but a whole brand image.
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t144" style="width:600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="left">
<table class="t124" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="570" class="t123" style="width:600px;"> <table class="t122" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t121"><p class="t119" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;"><span class="t118" style="margin:0;Margin:0;font-weight:bold;mso-line-height-rule:exactly;">Having trouble with this transaction?</span></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<table class="t129" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="570" class="t128" style="width:600px;"> <table class="t127" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t126"><p class="t125" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">It can take some time before this transaction is visible on your account. The amount will be deducted from your account in the coming 1-2 working days.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<table class="t135" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="570" class="t134" style="width:600px;"> <table class="t133" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t132"><p class="t131" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;"><a class="t130" href="https://tabular.email" style="margin:0;Margin:0;font-weight:700;font-style:normal;text-decoration:none;direction:ltr;color:#0046FF;mso-line-height-rule:exactly;" target="_blank">More information about Buyers Protection</a></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div>
</body>
</html>Module 6: Footer
Lastly, another section that can be enriched with variables and stay up to date even though years pass by without affecting the integrity of the design.
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t108,.t109{display:block!important}.t6{line-height:34px!important;font-size:28px!important}.t108{text-align:left!important}.t107,.t73{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:800px!important}.t71{padding-bottom:15px!important;padding-right:0!important}.t105{padding-left:0!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t148" style="min-width:100%;Margin:0px;padding:0px;background-color:#FAF8F5;">
<div class="t147" style="background-color:#FAF8F5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t146" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FAF8F5;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t144" style="width:600px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t142" style="padding:40px 15px 40px 15px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t141" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="570" class="t140" style="border-top:1px solid #CFCFCF;width:600px;"> <table class="t139" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t138" style="padding:30px 0 0 0;">
<p class="t136" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:13px;text-decoration:none;text-transform:none;letter-spacing:-0.52px;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:3px;">Payment Gateway Inc. © 2022</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div>
</body>
</html>2. Modular Promotional Email Template
<!--
* This email was built using Tabular.
* For more information, visit https://tabular.email
-->
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]>-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table {
border-collapse: separate;
table-layout: fixed;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
table td {
border-collapse: collapse
}
.ExternalClass {
width: 100%
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
body, a, li, p, h1, h2, h3 {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: none !important
}
body, #innerTable {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#innerTable img+div {
display: none;
display: none !important
}
img {
Margin: 0;
padding: 0;
-ms-interpolation-mode: bicubic
}
h1, h2, h3, p, a {
line-height: inherit;
overflow-wrap: normal;
white-space: normal;
word-break: break-word
}
a {
text-decoration: none
}
h1, h2, h3, p {
min-width: 100%!important;
width: 100%!important;
max-width: 100%!important;
display: inline-block!important;
border: 0;
padding: 0;
margin: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a[href^="mailto"],
a[href^="tel"],
a[href^="sms"] {
color: inherit;
text-decoration: none
}
</style>
<style type="text/css">
@media (min-width: 481px) {
.hd { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.hm { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important}
}
</style>
<!--[if !mso]>-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;"><div class="t269" style="background-color:#FFFFFF;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:fill color="#FFFFFF"/>
</v:background>
<![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable"><tr><td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t266" style="background-color:#C6D1E3;background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/18b5be52-0d3e-45ab-b6c5-c0144fbc9a01.png);background-repeat:no-repeat;background-size:contain;background-position:center bottom;width:600px;">
<table class="t265" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t264"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t29" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t28" style="background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/edc8beee-974d-4d05-a724-0299fb885d66.jpeg);background-repeat:no-repeat;background-size:cover;background-position:center top;width:800px;">
<table class="t27" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t26" style="padding:0 35px 0 35px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td><div class="t1" style="mso-line-height-rule:exactly;mso-line-height-alt:41px;line-height:41px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t5" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="90" class="t4" style="width:90px;">
<table class="t3" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t2"><div style="font-size:0px;"><img class="t0" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="90" height="90" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/cba8962d-ac6b-44bc-a97a-dbd504e3e3c0.png"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t6" style="mso-line-height-rule:exactly;mso-line-height-alt:24px;line-height:24px;font-size:1px;display:block;"> </div></td></tr><tr><td align="left">
<table class="t11" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="530" class="t10" style="width:600px;">
<table class="t9" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t8"><h1 class="t7" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:34px;font-weight:400;font-style:normal;font-size:28px;text-decoration:none;text-transform:none;direction:ltr;color:#333333;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Hiking gears to adapt for the fresh snow</h1></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t13" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t17" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="370" class="t16" style="width:370px;">
<table class="t15" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t14"><p class="t12" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:30px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">Here's everything you need to know about winter hiking, from picking out the right gear to staying safe on trails.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t18" style="mso-line-height-rule:exactly;mso-line-height-alt:348px;line-height:348px;font-size:1px;display:block;"> </div></td></tr><tr><td><div class="t20" style="mso-line-height-rule:exactly;mso-line-height-alt:35px;line-height:35px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t24" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="250" class="t23" style="background-color:#24303C;overflow:hidden;width:250px;border-radius:5px 5px 5px 5px;">
<table class="t22" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t21" style="text-align:center;line-height:44px;mso-line-height-rule:exactly;mso-text-raise:9px;"><span class="t19" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:44px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:uppercase;direction:ltr;color:#B7CBFC;text-align:center;mso-line-height-rule:exactly;mso-text-raise:9px;">Shop now</span></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t25" style="mso-line-height-rule:exactly;mso-line-height-alt:40px;line-height:40px;font-size:1px;display:block;"> </div></td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t55" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t54" style="width:800px;">
<table class="t53" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t52" style="padding:0 35px 0 35px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td><div class="t31" style="mso-line-height-rule:exactly;mso-line-height-alt:43px;line-height:43px;font-size:1px;display:block;"> </div></td></tr><tr><td align="left">
<table class="t35" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="530" class="t34" style="border-top:1.5px solid #FFFFFF;width:600px;">
<table class="t33" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t32" style="padding:45px 0 60px 0;"><h2 class="t30" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:38px;font-weight:500;font-style:normal;font-size:32px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">The essentials</h2></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t50" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="530" class="t49" style="background-color:#F5F6FA;overflow:hidden;width:800px;border-radius:5px 5px 5px 5px;">
<table class="t48" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t47" style="padding:35px 0 35px 0;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t40" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="423" class="t39" style="width:423px;">
<table class="t38" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t37"><div style="font-size:0px;"><img class="t36" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="423" height="423" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/946646e1-95cd-4bd7-9c4c-2ce2f85397bf.jpeg"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t42" style="mso-line-height-rule:exactly;mso-line-height-alt:19px;line-height:19px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t46" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="530" class="t45" style="width:600px;">
<table class="t44" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t43"><p class="t41" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hillsound Trail Crampon</p></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t51" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t113" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t112" style="width:800px;">
<table class="t111" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t110" style="padding:0 25px 0 25px;"><div class="t109" style="width:100%;text-align:left;"><div class="t108" style="display:inline-block;"><table class="t107" role="presentation" cellpadding="0" cellspacing="0" align="left" valign="top">
<tr class="t106"><td></td><td class="t71" width="203.33333" valign="top">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t70" style="width:100%;"><tr><td class="t67" style="width:10px;" width="10"></td><td class="t68" style="overflow:hidden;background-color:#F5F6FA;padding:25px 0 15px 0;border-radius:5px 5px 5px 5px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t60" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="110" class="t59" style="width:110px;">
<table class="t58" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t57"><div style="font-size:0px;"><img class="t56" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="110" height="150.31674208144796" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/ff970112-f512-4607-bc20-ff4664a493e6.jpeg"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t62" style="mso-line-height-rule:exactly;mso-line-height-alt:21px;line-height:21px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t66" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="183.33333333333331" class="t65" style="width:600px;">
<table class="t64" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t63"><p class="t61" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Wool Neck Gaiter</p></td></tr></table>
</td></tr></table>
</td></tr></table></td><td class="t69" style="width:10px;" width="10"></td></tr></table>
</td><td class="t88" width="203.33333" valign="top">
<!--[if !mso]>-->
<div class="t83" style="mso-line-height-rule:exactly;font-size:1px;display:none;"> </div>
<!--<![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t87" style="width:100%;"><tr><td class="t84" style="width:10px;" width="10"></td><td class="t85" style="overflow:hidden;background-color:#F5F6FA;padding:30px 0 15px 0;border-radius:5px 5px 5px 5px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t76" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="100" class="t75" style="width:100px;">
<table class="t74" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t73"><div style="font-size:0px;"><img class="t72" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="100" height="142.63959390862942" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/bdbbba75-75fb-4b6e-802e-e9b9ad21e033.jpeg"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t78" style="mso-line-height-rule:exactly;mso-line-height-alt:24px;line-height:24px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t82" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="183.33333333333331" class="t81" style="width:600px;">
<table class="t80" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t79"><p class="t77" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hand Warmer</p></td></tr></table>
</td></tr></table>
</td></tr></table></td><td class="t86" style="width:10px;" width="10"></td></tr></table>
</td><td class="t105" width="203.33333" valign="top">
<!--[if !mso]>-->
<div class="t100" style="mso-line-height-rule:exactly;font-size:1px;display:none;"> </div>
<!--<![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t104" style="width:100%;"><tr><td class="t101" style="width:10px;" width="10"></td><td class="t102" style="overflow:hidden;background-color:#F5F6FA;padding:20px 0 15px 0;border-radius:5px 5px 5px 5px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t93" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="105" class="t92" style="width:105px;">
<table class="t91" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t90"><div style="font-size:0px;"><img class="t89" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="105" height="155.82191780821918" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/a5da1736-3698-4315-9caa-89cab22b141f.jpeg"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t95" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t99" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="183.33333333333331" class="t98" style="width:600px;">
<table class="t97" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t96"><p class="t94" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hiking poles</p></td></tr></table>
</td></tr></table>
</td></tr></table></td><td class="t103" style="width:10px;" width="10"></td></tr></table>
</td>
<td></td></tr>
</table></div></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t128" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t127" style="width:800px;">
<table class="t126" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t125" style="padding:0 35px 0 35px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td><div class="t115" style="mso-line-height-rule:exactly;mso-line-height-alt:37px;line-height:37px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t119" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="400" class="t118" style="width:400px;">
<table class="t117" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t116"><p class="t114" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:30px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">Winter hiking apparel you want to consider before heading out into the cold.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="left">
<table class="t124" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="530" class="t123" style="background-color:#f3f3f3;width:600px;">
<table class="t122" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t121" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;"><span class="t120" style="display:block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#333;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Shop WINTER'S ESSENTIALS</span></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t164" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t163" style="width:800px;">
<table class="t162" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t161" style="padding:0 35px 0 35px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td><div class="t130" style="mso-line-height-rule:exactly;mso-line-height-alt:43px;line-height:43px;font-size:1px;display:block;"> </div></td></tr><tr><td align="left">
<table class="t134" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="530" class="t133" style="border-top:1.5px solid #FFFFFF;width:600px;">
<table class="t132" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t131" style="padding:45px 0 47px 0;"><h2 class="t129" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:38px;font-weight:500;font-style:normal;font-size:32px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Blog</h2></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t159" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="530" class="t158" style="background-color:#3E5072;background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/f74cdc5b-9549-4d78-938f-7cb2d87afc88.png);background-repeat:no-repeat;background-size:cover;background-position:center center;overflow:hidden;width:800px;border-radius:10px 10px 10px 10px;">
<table class="t157" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t156" style="padding:71px 30px 50px 30px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t139" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="445" class="t138" style="width:445px;">
<table class="t137" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t136"><p class="t135" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:57px;font-weight:500;font-style:italic;font-size:52px;text-decoration:none;text-transform:none;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Days are shorter in December.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t141" style="mso-line-height-rule:exactly;mso-line-height-alt:280px;line-height:280px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t144" style="width:450px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t142"><p class="t140" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:25px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">The winter solstice occurs in December, and in the northern hemisphere the date marks the 24-hour period with the fewest daylight hours of the year. That is why today got back home in darkness.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="left">
<table class="t150" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="470" class="t149" style="background-color:#E3D7FF;width:600px;">
<table class="t148" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t147" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;"><span class="t146" style="display:block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Read the story</span></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t155" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t154" style="width:450px;">
<table class="t153" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t152"><p class="t151" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:19px;font-weight:500;font-style:italic;font-size:13px;text-decoration:none;text-transform:uppercase;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">3 min read</p></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t160" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t263" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="600" class="t262" style="background-color:transparent;width:600px;">
<table class="t261" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t260" style="padding:45px 75px 130px 75px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t169" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="67" class="t168" style="width:67px;">
<table class="t167" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t166"><div style="font-size:0px;"><img class="t165" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="67" height="46.6969696969697" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0a7cac33-17f8-4796-bf33-850fc8d23e2d.png"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t198" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t202" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t201" style="width:600px;">
<table class="t200" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t199"><div class="t197" style="width:100%;text-align:center;"><div class="t196" style="display:inline-block;"><table class="t195" role="presentation" cellpadding="0" cellspacing="0" align="center" valign="middle">
<tr class="t194"><td></td><td class="t175" width="80" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t174" style="width:100%;"><tr><td class="t171" style="width:10px;" width="10"></td><td class="t172" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><span class="t170" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">SHOP</span></td><td class="t173" style="width:10px;" width="10"></td></tr></table>
</td><td class="t181" width="80" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t180" style="width:100%;"><tr><td class="t177" style="width:10px;" width="10"></td><td class="t178" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><span class="t176" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">News</span></td><td class="t179" style="width:10px;" width="10"></td></tr></table>
</td><td class="t187" width="94" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t186" style="width:100%;"><tr><td class="t183" style="width:10px;" width="10"></td><td class="t184" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><span class="t182" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">EVENTS</span></td><td class="t185" style="width:10px;" width="10"></td></tr></table>
</td><td class="t193" width="96" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t192" style="width:100%;"><tr><td class="t189" style="width:10px;" width="10"></td><td class="t190" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><span class="t188" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">DONATE</span></td><td class="t191" style="width:10px;" width="10"></td></tr></table>
</td>
<td></td></tr>
</table></div></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t203" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t241" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t240" style="border-bottom:1px solid #FFFFFF;border-top:1px solid #FFFFFF;width:800px;">
<table class="t239" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t238" style="padding:30px 0 30px 0;"><div class="t237" style="width:100%;text-align:center;"><div class="t236" style="display:inline-block;"><table class="t235" role="presentation" cellpadding="0" cellspacing="0" align="center" valign="middle">
<tr class="t234"><td></td><td class="t209" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t208" style="width:100%;"><tr><td class="t205" style="width:17px;" width="17"></td><td class="t206"><div style="font-size:0px;"><img class="t204" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" height="35" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/1bbbcf73-ca66-4212-bc9f-d413c2953544.png"/></div></td><td class="t207" style="width:17px;" width="17"></td></tr></table>
</td><td class="t215" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t214" style="width:100%;"><tr><td class="t211" style="width:17px;" width="17"></td><td class="t212"><div style="font-size:0px;"><img class="t210" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" height="34.52054794520548" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/7615a99a-3341-4471-a1da-de93eefd7f71.png"/></div></td><td class="t213" style="width:17px;" width="17"></td></tr></table>
</td><td class="t221" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t220" style="width:100%;"><tr><td class="t217" style="width:17px;" width="17"></td><td class="t218"><div style="font-size:0px;"><img class="t216" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" height="40.833333333333336" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/b022c183-f805-4f92-843c-6090bdf349c5.png"/></div></td><td class="t219" style="width:17px;" width="17"></td></tr></table>
</td><td class="t227" width="75" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t226" style="width:100%;"><tr><td class="t223" style="width:17px;" width="17"></td><td class="t224"><div style="font-size:0px;"><img class="t222" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="41" height="29.285714285714285" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0b424624-acd4-4bf8-ae5b-389204137ac6.png"/></div></td><td class="t225" style="width:17px;" width="17"></td></tr></table>
</td><td class="t233" width="66" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t232" style="width:100%;"><tr><td class="t229" style="width:17px;" width="17"></td><td class="t230"><div style="font-size:0px;"><img class="t228" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="32" height="32" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/bf5776b5-1a48-4dd8-95c5-e6d004f0b1f2.png"/></div></td><td class="t231" style="width:17px;" width="17"></td></tr></table>
</td>
<td></td></tr>
</table></div></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t246" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t245" style="border-bottom:1px solid #FFFFFF;width:600px;">
<table class="t244" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t243" style="padding:30px 0 30px 0;"><p class="t242" style="margin:0;Margin:0;font-family:Inter,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:21px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">6075, De Chambly Road, New York, New York 10001</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t248" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t252" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t251" style="width:600px;">
<table class="t250" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t249"><p class="t247" style="margin:0;Margin:0;font-family:Inter,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:21px;font-weight:400;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Copyright © 2022 All rights reserved.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t253" style="mso-line-height-rule:exactly;mso-line-height-alt:22px;line-height:22px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t259" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t258" style="width:600px;">
<table class="t257" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t256"><p class="t255" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#888888;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;"><a class="t254" href="https://tabular.email" style="margin:0;Margin:0;font-weight:700;font-style:normal;text-decoration:none;direction:ltr;color:#0046FF;mso-line-height-rule:exactly;" target="_blank">Unsubscribe</a></p></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table></div><div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div></body>
</html>Email Header
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table {
border-collapse: separate;
table-layout: fixed;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
table td {
border-collapse: collapse
}
.ExternalClass {
width: 100%
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
body, a, li, p, h1, h2, h3 {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: none !important
}
body, #innerTable {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#innerTable img+div {
display: none;
display: none !important
}
img {
Margin: 0;
padding: 0;
-ms-interpolation-mode: bicubic
}
h1, h2, h3, p, a {
line-height: inherit;
overflow-wrap: normal;
white-space: normal;
word-break: break-word
}
a {
text-decoration: none
}
h1, h2, h3, p {
min-width: 100%!important;
width: 100%!important;
max-width: 100%!important;
display: inline-block!important;
border: 0;
padding: 0;
margin: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a[href^="mailto"],
a[href^="tel"],
a[href^="sms"] {
color: inherit;
text-decoration: none
}
</style>
<style type="text/css">
@media (min-width: 481px) {
.hd { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.hm { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>Module 1: Header/Hero Section
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Header/Hero Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t266" style="background-color:#C6D1E3;background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/18b5be52-0d3e-45ab-b6c5-c0144fbc9a01.png);background-repeat:no-repeat;background-size:contain;background-position:center bottom;width:600px;">
<div> <table class="t265" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t264">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t29" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="600" class="t28" style="background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/edc8beee-974d-4d05-a724-0299fb885d66.jpeg);background-repeat:no-repeat;background-size:cover;background-position:center top;width:600px;"> <div> <table class="t27" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t26" style="padding:0 35px 0 35px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr><td><div class="t1" style="mso-line-height-rule:exactly;mso-line-height-alt:41px;line-height:41px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center">
<table class="t5" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="90" class="t4" style="width:90px;">
<table class="t3" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t2"><div style="font-size:0px;"><img class="t0" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="90" height="90" alt="Logo" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/cba8962d-ac6b-44bc-a97a-dbd504e3e3c0.png"/></div></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t6" style="mso-line-height-rule:exactly;mso-line-height-alt:24px;line-height:24px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="left"> <table class="t11" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="530" class="t10" style="width:530px;"> <table class="t9" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t8"><h1 class="t7" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:34px;font-weight:400;font-style:normal;font-size:28px;text-decoration:none;text-transform:none;direction:ltr;color:#333333;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Hiking gears to adapt for the fresh snow</h1></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t13" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t17" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="370" class="t16" style="width:370px;">
<table class="t15" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t14"><p class="t12" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:30px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">Here's everything you need to know about winter hiking, from picking out the right gear to staying safe on trails.</p></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t18" style="mso-line-height-rule:exactly;mso-line-height-alt:348px;line-height:348px;font-size:1px;display:block;"> </div></td></tr>
<tr><td><div class="t20" style="mso-line-height-rule:exactly;mso-line-height-alt:35px;line-height:35px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t24" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="250" class="t23" style="background-color:#24303C;overflow:hidden;width:250px;border-radius:5px 5px 5px 5px;">
<table class="t22" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t21" style="text-align:center;line-height:44px;mso-line-height-rule:exactly;mso-text-raise:9px; padding: 5px 10px;"><a href="#" target="_blank" style="text-decoration:none;"><span class="t19" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:44px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:uppercase;direction:ltr;color:#B7CBFC;text-align:center;mso-line-height-rule:exactly;mso-text-raise:9px;">Shop now</span></a></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t25" style="mso-line-height-rule:exactly;mso-line-height-alt:40px;line-height:40px;font-size:1px;display:block;"> </div></td></tr>
</table>
</td>
</tr>
</table>
</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 2: Section Title ("The essentials")
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Section Title Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t55" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t54" style="width:600px;">
<table class="t53" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t52" style="padding:0 35px 0 35px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr><td><div class="t31" style="mso-line-height-rule:exactly;mso-line-height-alt:43px;line-height:43px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="left"> <table class="t35" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="530" class="t34" style="border-top:1.5px solid #FFFFFF;width:530px;">
<table class="t33" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t32" style="padding:45px 0 60px 0;"> <h2 class="t30" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:38px;font-weight:500;font-style:normal;font-size:32px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">The essentials</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 3: Main Product Feature
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Main Product Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t55" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t54" style="width:600px;">
<table class="t53" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t52" style="padding:0 35px 0 35px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t50" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="530" class="t49" style="background-color:#F5F6FA;overflow:hidden;width:530px;border-radius:5px 5px 5px 5px;">
<table class="t48" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t47" style="padding:35px 0 35px 0;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t40" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="423" class="t39" style="width:423px;">
<table class="t38" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t37">
<div style="font-size:0px;"><img class="t36" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="423" height="423" alt="Hillsound Trail Crampon" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/946646e1-95cd-4bd7-9c4c-2ce2f85397bf.jpeg"/></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t42" style="mso-line-height-rule:exactly;mso-line-height-alt:19px;line-height:19px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t46" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="530" class="t45" style="width:530px;">
<table class="t44" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t43">
<p class="t41" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hillsound Trail Crampon</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t51" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 4: Three-Column Product Grid
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>3-Column Grid Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t113" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t112" style="width:600px;">
<table class="t111" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t110" style="padding:0 25px 0 25px;"> <div class="t109" style="width:100%;text-align:left;"> <div class="t108" style="display:inline-block; width:100%; max-width:183.33px; vertical-align:top;"> <table class="t107" role="presentation" cellpadding="0" cellspacing="0" width="100%" valign="top">
<tr class="t106">
<td class="t71" width="183.33" valign="top"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t70" style="width:100%;">
<tr>
<td class="t67" style="width:10px;" width="10"></td> <td class="t68" style="overflow:hidden;background-color:#F5F6FA;padding:25px 0 15px 0;border-radius:5px 5px 5px 5px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t60" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="110" class="t59" style="width:110px;">
<table class="t58" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t57"><div style="font-size:0px;"><img class="t56" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="110" alt="Wool Neck Gaiter" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/ff970112-f512-4607-bc20-ff4664a493e6.jpeg"/></div></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t62" style="mso-line-height-rule:exactly;mso-line-height-alt:21px;line-height:21px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t66" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="163.33" class="t65" style="width:163.33px;"> <table class="t64" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t63"><p class="t61" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Wool Neck Gaiter</p></td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
</td>
<td class="t69" style="width:10px;" width="10"></td></tr>
</table>
</td>
</tr>
</table>
</div>
<div class="t108" style="display:inline-block; width:100%; max-width:183.33px; vertical-align:top;"> <div class="t83" style="mso-line-height-rule:exactly;font-size:1px;display:none;"> </div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t87" style="width:100%;">
<tr>
<td class="t84" style="width:10px;" width="10"></td> <td class="t85" style="overflow:hidden;background-color:#F5F6FA;padding:30px 0 15px 0;border-radius:5px 5px 5px 5px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t76" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="100" class="t75" style="width:100px;">
<table class="t74" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t73"><div style="font-size:0px;"><img class="t72" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="100" alt="Hand Warmer" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/bdbbba75-75fb-4b6e-802e-e9b9ad21e033.jpeg"/></div></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t78" style="mso-line-height-rule:exactly;mso-line-height-alt:24px;line-height:24px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t82" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="163.33" class="t81" style="width:163.33px;"> <table class="t80" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t79"><p class="t77" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hand Warmer</p></td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
</td>
<td class="t86" style="width:10px;" width="10"></td> </tr>
</table>
</div>
<div class="t108" style="display:inline-block; width:100%; max-width:183.33px; vertical-align:top;"> <div class="t100" style="mso-line-height-rule:exactly;font-size:1px;display:none;"> </div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t104" style="width:100%;">
<tr>
<td class="t101" style="width:10px;" width="10"></td> <td class="t102" style="overflow:hidden;background-color:#F5F6FA;padding:20px 0 15px 0;border-radius:5px 5px 5px 5px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t93" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="105" class="t92" style="width:105px;">
<table class="t91" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t90"><div style="font-size:0px;"><img class="t89" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="105" alt="Hiking poles" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/a5da1736-3698-4315-9caa-89cab22b141f.jpeg"/></div></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t95" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t99" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="163.33" class="t98" style="width:163.33px;"> <table class="t97" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t96"><p class="t94" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Hiking poles</p></td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
</td>
<td class="t103" style="width:10px;" width="10"></td> </tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 5: Text Block & Link ("Winter's essentials")
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Text Block & Link Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t128" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t127" style="width:600px;">
<table class="t126" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t125" style="padding:0 35px 0 35px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr><td><div class="t115" style="mso-line-height-rule:exactly;mso-line-height-alt:37px;line-height:37px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t119" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="400" class="t118" style="width:400px;">
<table class="t117" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t116">
<p class="t114" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:30px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">Winter hiking apparel you want to consider before heading out into the cold.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td style="padding-top: 15px;"> <table class="t124" role="presentation" cellpadding="0" cellspacing="0" width="100%"> <tr>
<td width="530" class="t123" style="background-color:#f3f3f3;width:530px; text-align: center;"> <table class="t122" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t121" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;">
<a href="#" target="_blank" style="text-decoration: none;"> <span class="t120" style="display:inline-block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#333;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Shop WINTER'S ESSENTIALS</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 6: Section Title ("Blog")
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Section Title Module (Blog)</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t164" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t163" style="width:600px;">
<table class="t162" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t161" style="padding:0 35px 0 35px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr><td><div class="t130" style="mso-line-height-rule:exactly;mso-line-height-alt:43px;line-height:43px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="left"> <table class="t134" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="530" class="t133" style="border-top:1.5px solid #FFFFFF;width:530px;">
<table class="t132" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t131" style="padding:45px 0 47px 0;"> <h2 class="t129" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:38px;font-weight:500;font-style:normal;font-size:32px;text-decoration:none;text-transform:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Blog</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 7: Blog Feature Block
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Blog Feature Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" class="t266" style="background-color:#C6D1E3; width:600px;">
<table class="t164" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="600" class="t163" style="width:600px;">
<table class="t162" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t161" style="padding:0 35px 0 35px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center">
<table class="t159" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="530" class="t158" style="background-color:#3E5072;background-image:url(https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/f74cdc5b-9549-4d78-938f-7cb2d87afc88.png);background-repeat:no-repeat;background-size:cover;background-position:center center;overflow:hidden;width:530px;border-radius:10px 10px 10px 10px;">
<div> <table class="t157" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t156" style="padding:71px 30px 50px 30px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t139" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="445" class="t138" style="width:445px;">
<table class="t137" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t136"><p class="t135" style="margin:0;Margin:0;font-family:Lora,Georgia,Times New Roman,Times,serif;line-height:57px;font-weight:500;font-style:italic;font-size:52px;text-decoration:none;text-transform:none;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Days are shorter in December.</p></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t141" style="mso-line-height-rule:exactly;mso-line-height-alt:280px;line-height:280px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t145" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t144" style="width:450px;">
<table class="t143" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t142"><p class="t140" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:25px;font-weight:400;font-style:normal;font-size:20px;text-decoration:none;text-transform:none;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">The winter solstice occurs in December, and in the northern hemisphere the date marks the 24-hour period with the fewest daylight hours of the year. That is why today got back home in darkness.</p></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td style="padding-top: 20px;"> <table class="t150" role="presentation" cellpadding="0" cellspacing="0" width="100%"> <tr>
<td align="center"> <table role="presentation" cellpadding="0" cellspacing="0"><tr><td width="470" class="t149" style="background-color:#E3D7FF;width:470px; text-align:center;"> <table class="t148" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t147" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;">
<a href="#" target="_blank" style="text-decoration: none;"> <span class="t146" style="display:inline-block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#24303C;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Read the story</span>
</a>
</td>
</tr>
</table>
</td></tr></table>
</td>
</tr>
</table>
</td></tr>
<tr><td style="padding-top: 15px;"> <table class="t155" role="presentation" cellpadding="0" cellspacing="0" width="100%"> <tr>
<td align="center"> <table role="presentation" cellpadding="0" cellspacing="0"><tr><td width="450" class="t154" style="width:450px;"> <table class="t153" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t152">
<p class="t151" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:19px;font-weight:500;font-style:italic;font-size:13px;text-decoration:none;text-transform:uppercase;direction:ltr;color:#E3D7FF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">3 min read</p>
</td>
</tr>
</table>
</td></tr></table>
</td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
</table>
</div> </td>
</tr>
</table>
</td>
</tr>
<tr><td><div class="t160" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 8: Footer Section
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Footer Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t106,.t107{display:block!important}.t110{padding-left:15px!important;padding-right:15px!important}.t106{text-align:left!important}.t101,.t103,.t171,.t173,.t177,.t179,.t183,.t185,.t189,.t191,.t205,.t207,.t211,.t213,.t217,.t219,.t223,.t225,.t229,.t231,.t67,.t69,.t84,.t86{display:revert!important}.t105,.t71,.t88{vertical-align:top!important;display:inline-block!important;width:100%!important;max-width:820px!important}.t175,.t181,.t187,.t193,.t209,.t215,.t221,.t227,.t233{vertical-align:middle!important}.t100,.t83{mso-line-height-alt:20px!important;line-height:20px!important;display:block!important}.t125,.t161,.t26,.t52{padding-left:25px!important;padding-right:25px!important}.t135{line-height:50px!important;font-size:42px!important}.t260{padding:40px 30px 75px!important}.t238{padding-bottom:36px!important}.t194,.t234{text-align:center!important}.t209,.t215,.t221{width:69px!important}.t227{width:75px!important}.t233{width:66px!important}.t175,.t181{width:80px!important}.t193{width:96px!important}.t187{width:94px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&family=Lora:ital,wght@0,500;1,500&family=Lato:wght@700&family=Inter:wght@400&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t270" style="min-width:100%;Margin:0px;padding:0px;background-color:#FFFFFF;">
<div class="t269" style="background-color:#FFFFFF;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t268" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#FFFFFF;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t267" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 600px; width: 100%;"> <tr>
<td width="600" style="width:600px;">
<table class="t263" role="presentation" cellpadding="0" cellspacing="0" width="100%"> <tr>
<td width="600" class="t262" style="background-color:transparent;width:600px;">
<table class="t261" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t260" style="padding:45px 75px 130px 75px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="center"> <table class="t169" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="67" class="t168" style="width:67px;">
<table class="t167" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t166"><div style="font-size:0px;"><img class="t165" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="67" alt="Footer Logo" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0a7cac33-17f8-4796-bf33-850fc8d23e2d.png"/></div></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t198" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t202" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t201" style="width:450px;"> <table class="t200" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t199">
<div class="t197" style="width:100%;text-align:center;">
<div class="t196" style="display:inline-block; max-width: 80px; vertical-align: middle;">
<table class="t195" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t194">
<td class="t175" width="80" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t174" style="width:100%;"><tr><td class="t171" style="width:10px;" width="10"></td><td class="t172" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><a href="#" target="_blank" style="text-decoration: none;"><span class="t170" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">SHOP</span></a></td><td class="t173" style="width:10px;" width="10"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t196" style="display:inline-block; max-width: 80px; vertical-align: middle;">
<table class="t195" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t194">
<td class="t181" width="80" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t180" style="width:100%;"><tr><td class="t177" style="width:10px;" width="10"></td><td class="t178" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><a href="#" target="_blank" style="text-decoration: none;"><span class="t176" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">News</span></a></td><td class="t179" style="width:10px;" width="10"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t196" style="display:inline-block; max-width: 94px; vertical-align: middle;">
<table class="t195" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t194">
<td class="t187" width="94" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t186" style="width:100%;"><tr><td class="t183" style="width:10px;" width="10"></td><td class="t184" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><a href="#" target="_blank" style="text-decoration: none;"><span class="t182" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">EVENTS</span></a></td><td class="t185" style="width:10px;" width="10"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t196" style="display:inline-block; max-width: 96px; vertical-align: middle;">
<table class="t195" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t194">
<td class="t193" width="96" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t192" style="width:100%;"><tr><td class="t189" style="width:10px;" width="10"></td><td class="t190" style="background-color:transparent;text-align:center;line-height:28px;mso-line-height-rule:exactly;mso-text-raise:3px;"><a href="#" target="_blank" style="text-decoration: none;"><span class="t188" style="display:block;margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:28px;font-weight:400;font-style:normal;font-size:17px;text-decoration:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:3px;">DONATE</span></a></td><td class="t191" style="width:10px;" width="10"></td></tr></table>
</td>
</tr>
</table>
</div>
</div>
</td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t203" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t241" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="450" class="t240" style="border-bottom:1px solid #334251;border-top:1px solid #334251;width:450px;"> <table class="t239" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t238" style="padding:30px 0 30px 0;">
<div class="t237" style="width:100%;text-align:center;">
<div class="t236" style="display:inline-block; max-width: 69px; vertical-align: middle;">
<table class="t235" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t234">
<td class="t209" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t208" style="width:100%;"><tr><td class="t205" style="width:17px;" width="17"></td><td class="t206"><div style="font-size:0px;"><a href="#" target="_blank"><img class="t204" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" alt="Social 1" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/1bbbcf73-ca66-4212-bc9f-d413c2953544.png"/></a></div></td><td class="t207" style="width:17px;" width="17"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t236" style="display:inline-block; max-width: 69px; vertical-align: middle;">
<table class="t235" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t234">
<td class="t215" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t214" style="width:100%;"><tr><td class="t211" style="width:17px;" width="17"></td><td class="t212"><div style="font-size:0px;"><a href="#" target="_blank"><img class="t210" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" alt="Social 2" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/7615a99a-3341-4471-a1da-de93eefd7f71.png"/></a></div></td><td class="t213" style="width:17px;" width="17"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t236" style="display:inline-block; max-width: 69px; vertical-align: middle;">
<table class="t235" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t234">
<td class="t221" width="69" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t220" style="width:100%;"><tr><td class="t217" style="width:17px;" width="17"></td><td class="t218"><div style="font-size:0px;"><a href="#" target="_blank"><img class="t216" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="35" alt="Social 3" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/b022c183-f805-4f92-843c-6090bdf349c5.png"/></a></div></td><td class="t219" style="width:17px;" width="17"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t236" style="display:inline-block; max-width: 75px; vertical-align: middle;">
<table class="t235" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t234">
<td class="t227" width="75" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t226" style="width:100%;"><tr><td class="t223" style="width:17px;" width="17"></td><td class="t224"><div style="font-size:0px;"><a href="#" target="_blank"><img class="t222" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="41" alt="Social 4" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0b424624-acd4-4bf8-ae5b-389204137ac6.png"/></a></div></td><td class="t225" style="width:17px;" width="17"></td></tr></table>
</td>
</tr>
</table>
</div>
<div class="t236" style="display:inline-block; max-width: 66px; vertical-align: middle;">
<table class="t235" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="center" valign="middle">
<tr class="t234">
<td class="t233" width="66" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t232" style="width:100%;"><tr><td class="t229" style="width:17px;" width="17"></td><td class="t230"><div style="font-size:0px;"><a href="#" target="_blank"><img class="t228" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="32" alt="Social 5" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/bf5776b5-1a48-4dd8-95c5-e6d004f0b1f2.png"/></a></div></td><td class="t231" style="width:17px;" width="17"></td></tr></table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"> <table class="t246" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t245" style="border-bottom:1px solid #334251;width:450px;"> <table class="t244" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t243" style="padding:30px 0 30px 0;"><p class="t242" style="margin:0;Margin:0;font-family:Inter,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:21px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">6075, De Chambly Road, New York, New York 10001</p></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t248" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t252" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t251" style="width:450px;"> <table class="t250" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t249"><p class="t247" style="margin:0;Margin:0;font-family:Inter,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:21px;font-weight:400;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#334251;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Copyright © 2022 All rights reserved.</p></td></tr></table>
</td></tr></table>
</td>
</tr>
<tr><td><div class="t253" style="mso-line-height-rule:exactly;mso-line-height-alt:22px;line-height:22px;font-size:1px;display:block;"> </div></td></tr>
<tr>
<td align="center"> <table class="t259" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="450" class="t258" style="width:450px;"> <table class="t257" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t256"><p class="t255" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#888888;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;"><a class="t254" href="https://tabular.email" style="margin:0;Margin:0;font-weight:700;font-style:normal;text-decoration:none;direction:ltr;color:#0046FF;mso-line-height-rule:exactly;" target="_blank">Unsubscribe</a></p></td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>3. Modular Newsletter Email Template
.png?w=700&fit=max&auto=format)
<!--
* This email was built using Tabular.
* For more information, visit https://tabular.email
-->
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]>-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table {
border-collapse: separate;
table-layout: fixed;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
table td {
border-collapse: collapse
}
.ExternalClass {
width: 100%
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
body, a, li, p, h1, h2, h3 {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: none !important
}
body, #innerTable {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#innerTable img+div {
display: none;
display: none !important
}
img {
Margin: 0;
padding: 0;
-ms-interpolation-mode: bicubic
}
h1, h2, h3, p, a {
line-height: inherit;
overflow-wrap: normal;
white-space: normal;
word-break: break-word
}
a {
text-decoration: none
}
h1, h2, h3, p {
min-width: 100%!important;
width: 100%!important;
max-width: 100%!important;
display: inline-block!important;
border: 0;
padding: 0;
margin: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a[href^="mailto"],
a[href^="tel"],
a[href^="sms"] {
color: inherit;
text-decoration: none
}
</style>
<style type="text/css">
@media (min-width: 481px) {
.hd { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.hm { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important}
}
</style>
<!--[if !mso]>-->
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body id="body" class="t80" style="min-width:100%;Margin:0px;padding:0px;background-color:#ffffff;"><div class="t79" style="background-color:#ffffff;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td class="t78" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#ffffff;" valign="top" align="center">
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:fill color="#ffffff"/>
</v:background>
<![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable"><tr><td align="center">
<table class="t23" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t22" style="border-bottom:1px solid #EDEDED;width:515px;">
<table class="t21" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t20" style="padding:30px 0 30px 0;"><div class="t19" style="width:100%;text-align:left;"><div class="t18" style="display:inline-block;"><table class="t17" role="presentation" cellpadding="0" cellspacing="0" align="left" valign="middle">
<tr class="t16"><td></td><td class="t7" width="257.5" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t6" style="width:100%;"><tr><td class="t5"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="left">
<table class="t4" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="40" class="t3" style="width:40px;">
<table class="t2" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t1"><div style="font-size:0px;"><img class="t0" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="40" height="39.34426229508197" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0d8f334c-04b1-47f2-9561-231e53975695.png"/></div></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td><td class="t15" width="257.5" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t14" style="width:100%;"><tr><td class="t13"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="right">
<table class="t12" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;"><tr><td width="160" class="t11" style="width:160px;">
<table class="t10" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t9"><p class="t8" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:right;mso-line-height-rule:exactly;mso-text-raise:2px;">Flash Blog</p></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td>
<td></td></tr>
</table></div></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t62" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="555" class="t61" style="width:555px;">
<table class="t60" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t59" style="padding:50px 20px 50px 20px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t28" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t27" style="width:600px;">
<table class="t26" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t25"><div style="font-size:0px;"><img class="t24" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="515" height="270.4915912031048" alt="" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/ace79e32-0aa6-494c-aa6d-7b7c47e66335.jpeg"/></div></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t29" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="left">
<table class="t34" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;"><tr><td width="107" class="t33" style="background-color:#282B40;overflow:hidden;width:107px;border-radius:20px 20px 20px 20px;">
<table class="t32" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t31"><p class="t30" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:32px;font-weight:700;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#FFFFFF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:5px;">Productivity</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t35" style="mso-line-height-rule:exactly;mso-line-height-alt:20px;line-height:20px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t40" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t39" style="width:600px;">
<table class="t38" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t37"><h1 class="t36" style="margin:0;Margin:0;font-family:Roboto,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:34px;font-weight:400;font-style:normal;font-size:28px;text-decoration:none;text-transform:none;direction:ltr;color:#333333;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Tales of the startup uncertainty principle</h1></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t41" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t46" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t45" style="width:600px;">
<table class="t44" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t43"><p class="t42" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">The best way to get a close look at your AI company’s value is by building the AI Company that has a large collection of data. This can be extremely useful as a business for a large business because it helps your customers understand the value of your AI company.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t47" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t52" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t51" style="width:600px;">
<table class="t50" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t49"><p class="t48" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">We will use this data to help us make it easier for us to make better investments in your business. This will help us improve our business on the scale of our competitors.</p></td></tr></table>
</td></tr></table>
</td></tr><tr><td><div class="t53" style="mso-line-height-rule:exactly;mso-line-height-alt:30px;line-height:30px;font-size:1px;display:block;"> </div></td></tr><tr><td align="center">
<table class="t58" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t57" style="background-color:#f3f3f3;overflow:hidden;width:600px;border-radius:8px 8px 8px 8px;">
<table class="t56" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t55" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;"><span class="t54" style="display:block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#333;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Read this story</span></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t77" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="555" class="t76" style="width:555px;">
<table class="t75" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t74" style="padding:0 20px 0 20px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;"><tr><td align="center">
<table class="t68" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t67" style="border-top:1px solid #EDEDED;width:555px;">
<table class="t66" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t65" style="padding:24px 0 24px 0;"><p class="t64" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:26px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#7B7B8A;text-align:left;mso-line-height-rule:exactly;mso-text-raise:3px;">You are receiving this email because you subscribed to marketing emails from Flash Blog — <a class="t63" href="https://tabular.email" style="margin:0;Margin:0;font-weight:700;font-style:normal;text-decoration:none;direction:ltr;color:#0046FF;mso-line-height-rule:exactly;" target="_blank">Unsubscribe</a></p></td></tr></table>
</td></tr></table>
</td></tr><tr><td align="center">
<table class="t73" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;"><tr><td width="515" class="t72" style="border-top:1px solid #EDEDED;width:555px;">
<table class="t71" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;"><tr><td class="t70" style="padding:24px 0 50px 0;"><p class="t69" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:26px;font-weight:400;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#7B7B8A;text-align:left;mso-line-height-rule:exactly;mso-text-raise:3px;">4019 Waterview Lane, Santa Fe, NM, New Mexico 87501<br/>Made by Flash Inc. ✌️</p></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr></table></td></tr></table></div><div class="gmail-fix" style="display: none; white-space: nowrap; font: 15px courier; line-height: 0;"> </div></body>
</html>Email Header
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table {
border-collapse: separate;
table-layout: fixed;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
table td {
border-collapse: collapse
}
.ExternalClass {
width: 100%
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
body, a, li, p, h1, h2, h3 {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: none !important
}
body, #innerTable {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#innerTable img+div {
display: none;
display: none !important
}
img {
Margin: 0;
padding: 0;
-ms-interpolation-mode: bicubic
}
h1, h2, h3, p, a {
line-height: inherit;
overflow-wrap: normal;
white-space: normal;
word-break: break-word
}
a {
text-decoration: none
}
h1, h2, h3, p {
min-width: 100%!important;
width: 100%!important;
max-width: 100%!important;
display: inline-block!important;
border: 0;
padding: 0;
margin: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a[href^="mailto"],
a[href^="tel"],
a[href^="sms"] {
color: inherit;
text-decoration: none
}
</style>
<style type="text/css">
@media (min-width: 481px) {
.hd { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.hm { display: none!important }
}
</style>
<style type="text/css">
@media (max-width: 480px) {
.t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
</head>Module 1: Header Section
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Header Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t80" style="min-width:100%;Margin:0px;padding:0px;background-color:#ffffff;">
<div class="t79" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t78" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#ffffff;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t23" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 515px;"> <tr>
<td width="515" class="t22" style="border-bottom:1px solid #EDEDED;width:515px;">
<table class="t21" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t20" style="padding:30px 0 30px 0;">
<div class="t19" style="width:100%;text-align:left;"> <div class="t18" style="display:inline-block; width: 50%; max-width: 257.5px; vertical-align: middle;"> <table class="t17" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="left" valign="middle">
<tr class="t16">
<td class="t7" width="257.5" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t6" style="width:100%;">
<tr>
<td class="t5">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="left"> <table class="t4" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="40" class="t3" style="width:40px;">
<table class="t2" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr><td class="t1"><div style="font-size:0px;"><img class="t0" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="40" alt="Logo" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/0d8f334c-04b1-47f2-9561-231e53975695.png"/></div></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="t18" style="display:inline-block; width: 50%; max-width: 257.5px; vertical-align: middle;"> <table class="t17" role="presentation" cellpadding="0" cellspacing="0" width="100%" align="left" valign="middle">
<tr class="t16">
<td class="t15" width="257.5" valign="middle">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="t14" style="width:100%;">
<tr>
<td class="t13">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100% !important;">
<tr>
<td align="right"> <table class="t12" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;">
<tr>
<td width="160" class="t11" style="width:160px;">
<table class="t10" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr><td class="t9"><p class="t8" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:22px;font-weight:500;font-style:normal;font-size:15px;text-decoration:none;text-transform:none;direction:ltr;color:#0E1E3B;text-align:right;mso-line-height-rule:exactly;mso-text-raise:2px;">Flash Blog</p></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 2: Banner Image (Blog Post),
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Banner Image Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t80" style="min-width:100%;Margin:0px;padding:0px;background-color:#ffffff;">
<div class="t79" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t78" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#ffffff;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t62" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 555px;">
<tr>
<td width="555" class="t61" style="width:555px;">
<table class="t60" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t59" style="padding:50px 20px 50px 20px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center"> <table class="t28" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="515" class="t27" style="width:515px;">
<table class="t26" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t25">
<div style="font-size:0px;">
<img class="t24" style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width="515" alt="Blog Post Banner" src="https://31ced4b8-23e8-4208-9ae9-84792b632a02.b-cdn.net/e/cf38188b-65dd-44ab-85b1-3eb4a11193f2/ace79e32-0aa6-494c-aa6d-7b7c47e66335.jpeg"/>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 3: Category Tag
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Category Tag Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t80" style="min-width:100%;Margin:0px;padding:0px;background-color:#ffffff;">
<div class="t79" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t78" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#ffffff;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t62" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 555px;">
<tr>
<td width="555" class="t61" style="width:555px;">
<table class="t60" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t59" style="padding:50px 20px 50px 20px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> <table class="t34" role="presentation" cellpadding="0" cellspacing="0" style="Margin-right:auto;">
<tr>
<td width="107" class="t33" style="background-color:#282B40;overflow:hidden;width:107px;border-radius:20px 20px 20px 20px;">
<table class="t32" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t31" style="padding: 2px 5px;"> <p class="t30" style="margin:0;Margin:0;font-family:Albert Sans,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:32px;font-weight:700;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;direction:ltr;color:#FFFFFF;text-align:center;mso-line-height-rule:exactly;mso-text-raise:5px;">Productivity</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Module 4: CTA Button ("Read this story")
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>CTA Button Module</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" content="" />
<meta content="target-densitydpi=device-dpi" name="viewport" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<style type="text/css">
table { border-collapse: separate; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt }
table td { border-collapse: collapse }
.ExternalClass { width: 100% }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100% }
body, a, li, p, h1, h2, h3 { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html { -webkit-text-size-adjust: none !important }
body, #innerTable { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
#innerTable img+div { display: none; display: none !important }
img { Margin: 0; padding: 0; -ms-interpolation-mode: bicubic }
h1, h2, h3, p, a { line-height: inherit; overflow-wrap: normal; white-space: normal; word-break: break-word }
a { text-decoration: none }
h1, h2, h3, p { min-width: 100%!important; width: 100%!important; max-width: 100%!important; display: inline-block!important; border: 0; padding: 0; margin: 0 }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important }
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
a[href^="mailto"], a[href^="tel"], a[href^="sms"] { color: inherit; text-decoration: none }
</style>
<style type="text/css"> @media (min-width: 481px) { .hd { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .hm { display: none!important } } </style>
<style type="text/css"> @media (max-width: 480px) { .t20{padding-left:20px!important;padding-right:20px!important}.t16{text-align:left!important}.t15,.t7{vertical-align:middle!important;width:800px!important}.t64,.t69{line-height:23px!important;font-size:13px!important} } </style>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700&family=Roboto:wght@400&family=Lato:wght@700&display=swap" rel="stylesheet" type="text/css" />
</head>
<body id="body" class="t80" style="min-width:100%;Margin:0px;padding:0px;background-color:#ffffff;">
<div class="t79" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="t78" style="font-size:0;line-height:0;mso-line-height-rule:exactly;background-color:#ffffff;" valign="top" align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="innerTable">
<tr>
<td align="center">
<table class="t62" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto; max-width: 555px;">
<tr>
<td width="555" class="t61" style="width:555px;">
<table class="t60" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t59" style="padding:50px 20px 50px 20px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center"> <table class="t58" role="presentation" cellpadding="0" cellspacing="0" style="Margin-left:auto;Margin-right:auto;">
<tr>
<td width="515" class="t57" style="background-color:#f3f3f3;overflow:hidden;width:515px;border-radius:8px 8px 8px 8px;">
<table class="t56" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td class="t55" style="text-align:center;line-height:24px;mso-line-height-rule:exactly;mso-text-raise:2px;padding:10px 10px 10px 10px;">
<a href="#" target="_blank" style="text-decoration:none;"> <span class="t54" style="display:block;margin:0;Margin:0;font-family:Lato,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:24px;font-weight:700;font-style:normal;font-size:16px;text-decoration:none;direction:ltr;color:#333;text-align:center;mso-line-height-rule:exactly;mso-text-raise:2px;">Read this story</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Modular Email Design
Modular email design is not just about using pre-made components and combining them. It's an approach where you see your brand as a whole piece and create design elements accordingly. In order to do that, a modular approach is the most conventional and scalable one.
A monolithic approach, where you design each template as its own, may result in creating a better template out of 200 templates, but modular design provides a standard and consistent quality. It allows you to create a master library filled with pre-designed, pre-coded, pre-tested building blocks which, like we've said many times, are modules.
In a simpler analogy, remember when you were playing with Legos and you built a car that had, let's say, blue headlights? The car is a part of a bigger entity—which is the creation you made using your whole Lego set—maybe a house with a garden, maybe 20 more cars. That specific car is a module that nests different modules in its structure, like the headlights. You can change the headlights without changing the whole car design, or the doors, or the hood.
These modules are ultimately designed to function together and independently. In email design concepts, let’s say you’re sending out transactional emails with specific buttons, with specific border radii or content with certain line spacing—you know it aligns with your brand and you love them. You can also use them in your sales campaign with different modules. And if you want to start a newsletter, same thing.
Reasons to Choose Modular Design in Emails
Personalization: Modular design gives you more freedom in working with variables and dynamic content. The smaller the piece you’re changing, the less effort it takes to create different templates.
Faster Building: Similar to the previous point, you’ll be creating lots of different types of emails and templates. Hardcoding your email templates takes a lot of time—even if you're using a cutting-edge email builder like Tabular. When you have pre-designed modules at hand, you can create new designs simply by changing a few modules or trying different combinations.
Reusability: Core elements like headers and footers are pretty much standard. You need to be consistent in your button styling, opt-out links, etc. These can be reused across different campaigns, saving you a huge amount of time by cutting repetitive work—which is arguably one of the biggest inefficiencies in any business.
Scalability: When you’re running a business, there will be many occasions where you need to use different email templates: order confirmations, shipping updates, cancellation confirmations, flash sales, etc. After some time, having an extensive component library is inevitable and will significantly speed up your template building process.
Collaboration: Modular systems provide a standard and a certain kind of flexibility without disrupting the consistency. No matter how many people you work with, the main stylist will always be the brand.
Localization: Tabular offers a fantastic feature here. You can create separate templates for each language and even change certain blocks. For example, you might want to conditionally hide a Christmas sweater block in emails targeting Muslim-majority countries. Modular design makes localization easier by giving you control over smaller parts of your design.
Legal Compliance and Deliverability: The benefit here comes from the freedom that modular design provides in A/B tests. You can test different modules and continue with the best-performing ones. This optimization will automatically improve new designs as well.
How to Implement Modular Design into Email Building
1. Planning
Planning is the first step. Before you start building anything, you need a clear vision and an inventory of blocks you'll be using. Ask yourself:
- What types of emails do we send (or plan to send)?
- Promotional/Marketing Campaigns
- Newsletters
- Transactional Emails
- Lifecycle Emails
- Internal Communications (if applicable)
- What are the common structural elements across these emails?
- Is there always a header with a logo?
- Always a main footer with legal info and social links?
- What types of content blocks do we frequently use?
- Headlines (H1, H2, H3)
- Text paragraphs
- Lists (bulleted/numbered)
- Single images or galleries
- Video placeholders
- Buttons (CTAs)
- Product displays
- Testimonials
- Dividers/spacers
- Social media buttons
- Personalization placeholders (e.g., [First Name])
- What different layouts are needed?
- Single column?
- Two/three columns?
- Are there components needed only for specific emails?
- Order summary table?
- Password reset button?
- Multi-article layout?
2. Set Standard Design Brand Guidelines
The brand kit is a must for professional businesses. The visual design is like how you dress your brand. Here’s what you need to define:
- Color Palette: Primary, secondary, accent colors (with hex codes).
- Typography: Fonts, font families, sizes, weights, line heights, etc.
- Logo Usage: Placement, minimum size, and clear space.
- Iconography: Style, approved icons, standard sizes/colors.
- Imagery: Style, tone, required treatments.
- Spacing: Padding, margins, max email body width, column gutter widths.
- Borders and Dividers: Color, thickness, style.
- Button Styles: Shape, padding, font, border, colors, hover states.
3. Build It
You can code it manually or use an email builder like Tabular—but using a builder is highly recommended. You’ll use lots of inline styles even if you have a separate CSS file, and you may lose or forget design elements. Over time, this turns into a nightmare.
Regardless of your approach, follow these principles:
- Independence and Interoperability: Each module must render correctly on its own and stack cleanly with others.
- Responsiveness: Modules must adapt to different screen sizes.
- Flexibility: Modules should handle different content gracefully.
- Testing: Test each module individually and in combinations across all major email clients and devices. You can do this directly with Tabular’s test email feature.
Final Thoughts
Modular email design is both fun and functional. Once you get the hang of it and start creating well-defined modules, the possibilities become endless—and, most importantly, easy. No matter what kind of email you're building, using predefined modules makes the design process smoother while preserving brand consistency.
If you’re not building your emails modularly yet, this is your sign to start.
And if you’re using Tabular, you already have the tools to make it happen.