Started a new discussion: How to prevent blocked images from turning into huge chunky squares in Outlook?
Started a new discussion: Swapping directions of nested tables?
Started a new discussion: Swapping direction of nested tables?
Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer
You can tell me! Although I'm glad it turned out to be an inliner issue, and not a code issue. Less stress for me. :-)
Replied to Discussion: Flabbergasted About What to do Regarding Inlining by
So it turns out, that it seems to be the fault of the inliner I was using, Premailer. I had Litmus perform client previews using their own inlining feature, and it works fine. Sheesh!
Replied to Discussion: Flabbergasted About What to do Regarding Inlining by
Well, according to Litmus' test, the only issue seems to be with Android- but I was under the impression that inlining for Gmail was a thing of the past. So, shouldn't style in the head work for Gmail on Android now? Looking at my second example below, what reason would there be for my emails not displaying as mobile version on Android when they aren't inlined?
Replied to Discussion: Flabbergasted About What to do Regarding Inlining by
Here is an example of what one of my email sections should look like:
http://i.imgur.com/WWoi8cw.jpg
Here is what it looks like in Litmus' GMAIL Imap APP on Android (no styles, or padding) :
http://i.imgur.com/3h3dryK.jpg
And here is what it looks like when I inline it with premailer (it just makes it the mobile version):
http://i.imgur.com/aV2lb5o.jpg
Replied to Discussion: Flabbergasted About What to do Regarding Inlining by
Here it is! Appreciate any advice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
#outlook a {
padding: 0; }
.ReadMsgBody {
width: 100%; }
.ExternalClass {
width: 100%;
line-height: 100%; }
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
img {
-ms-interpolation-mode: bicubic; }
* img[tabindex="0"] + div {
display: none !important; }
body {
background-color: #ffffff;
margin: 0;
padding: 0; }
@media screen and (max-width: 500px) {
body {
-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } }
img {
height: auto;
border: 0;
outline: none;
text-decoration: none; }
table,
td {
border: 0;
border-collapse: collapse !important;
mso-table-lspace: 0 !important;
mso-tablerspace: 0 !important;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
@media screen and (max-width: 500px) {
table,
td {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } }
body {
width: 100% !important;
height: 100% !important;
margin: 0;
padding: 0; }
.appleBody a {
color: #68440a;
text-decoration: none; }
.appleFooter a {
color: #999999;
text-decoration: none; }
@media screen and (max-width: 500px) {
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } }
/** Pru Colors */
a {
color: #007bc3;
text-decoration: none; }
a:hover {
color: #00619a;
background-color: #98c3de;
border-radius: 3px; }
a .link-text {
text-decoration: underline; }
.arrow {
padding-right: 5px !important;
padding-top: 5px !important;
font-size: 12px !important;
text-decoration: none !important; }
.button {
display: block;
line-height: 1.428571429;
color: #ffffff;
text-align: center;
border: 1px solid #007bc3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
text-decoration: none;
padding: 10px 10px; }
.button:hover {
color: #ffffff;
background-color: #00619a; }
.button-container {
text-align: center;
background-color: #007bc3; }
.button-container-yellow {
background-color: #ffd200; }
.button-container-yellow .button {
color: #333333;
border: 1px solid #ffd200; }
.button-container-yellow .button:hover {
color: #333333;
background-color: #d6b000;
border: 1px solid #d6b000; }
.rounded-large {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden; }
.rounded-small {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden; }
.section-padding {
padding: 25px 0px 25px 0px; }
@media screen and (max-width: 500px) {
.section-padding {
padding: 25px 10px; } }
.section-padding-small-top {
padding: 10px 0px 25px 0px; }
@media screen and (max-width: 500px) {
.section-padding-small-top {
padding: 10px 10px 25px 10px; } }
.section-padding-small-bottom {
padding: 25px 0px 10px 0px; }
@media screen and (max-width: 500px) {
.section-padding-small-bottom {
padding: 25px 10px 25px 10px; } }
.section-padding-large-top {
padding: 25px 0px 10px 0px; }
@media screen and (max-width: 500px) {
.section-padding-large-top {
padding: 25px 10px 25px 10px; } }
.section-padding-large-bottom {
padding: 10px 0px 25px 0px; }
@media screen and (max-width: 500px) {
.section-padding-large-bottom {
padding: 10px 10px 25px 10px; } }
.section-padding-small {
padding: 10px 0px 10px 0px; }
@media screen and (max-width: 500px) {
.section-padding-small {
padding: 10px 10px; } }
.margin {
padding: 5px 0 5px 0; }
.preheader {
display: none;
width: 0px;
height: 0px;
line-height: 0;
color: #ffffff;
opacity: 0;
max-width: 0px;
max-height: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden; }
.preheader-wrapper {
padding: 25px 0 0 0; }
@media screen and (max-width: 500px) {
.preheader-wrapper {
width: 100%;
padding: 0px 0px 0 0px; } }
.yellow {
color: #ffd200; }
.lead-in {
color: #007bc3;
text-align: center;
font-size: 26px;
line-height: 1.428571429;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal; }
@media screen and (max-width: 430px) {
.lead-in {
font-size: 20.8px; } }
.body-copy {
color: #333333;
text-align: center;
padding: 0 0 21px 0;
font-size: 15px;
line-height: 1.428571429;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media screen and (max-width: 430px) {
.body-copy {
line-height: 1.614; } }
td .body-copy {
padding: 5px 0; }
td .left {
text-align: left !important; }
.subhead {
color: #002247;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center; }
.subhead.h3 {
font-size: 18px;
padding: 5px 0 25px 0; }
.subhead.h4 {
font-size: 15px;
padding: 10px 0 10px 0; }
.subhead.h5 {
font-size: 14px;
padding: 5px 0 5px 0; }
@media screen and (max-width: 430px) {
table {
width: 100% !important;
text-align: center;
margin: 0 auto; } }
@media screen and (max-width: 500px) {
table.responsive-table {
max-width: 500px;
width: 100%; } }
table.responsive-table img {
padding: 0 0 5px 0;
max-width: 100% !important; }
table.responsive-table.header img {
padding: 0 0 0 0; }
@media screen and (max-width: 430px) {
table.responsive-table .column {
width: 100% !important;
max-width: 100% !important; } }
@media screen and (max-width: 430px) {
.logo img {
width: auto;
height: 40px;
margin: 0 auto; } }
@media screen and (max-width: 500px) {
.img-max {
width: 100% !important;
height: auto !important;
max-width: 100% !important; } }
.cta {
font-size: 18px;
line-height: 1.428571429;
color: #007bc3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0 0 5px 0;
font-weight: bold; }
.bullets td {
text-align: left;
padding: 0 0 5px 0; }
@media screen and (max-width: 500px) {
.bullets td {
text-align: left !important; } }
.bullets span {
line-height: 1.428571429;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.bullet {
color: #007bc3 !important;
font-size: 15px;
padding-right: 10px; }
@media screen and (max-width: 500px) {
.bullet {
font-size: 12px; } }
.bullet-text {
color: #333333;
padding: 5px 0 5px 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.meta, .caption {
line-height: 1.428571429;
color: #999999;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.blockquote {
line-height: 1.428571429;
color: #999999;
font-size: 18px;
font-family: Garamond, Georgia, Times, serif !important;
font-style: italic;
padding: 0 10px; }
.disclosure-text {
display: block;
line-height: 1.1428571432;
color: #999999;
text-align: justify;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal; }
.disclosure-text-large {
font-size: 14px;
line-height: 1.1428571432; }
.superscript {
line-height: 1.428571429;
font-size: 9px;
mso-line-height-rule: exactly;
vertical-align: top; }
hr {
border-top: 1px solid #cccccc;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;
border-bottom: 0 solid #ffffff; }
.event-section {
background-color: #cccccc; }
@media screen and (max-width: 500px) {
.event-section {
padding: 0px 10px; } }
.rounded-large {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden; }
.rounded-small {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden; }
.mobile-only {
display: table !important; }
@media screen and (max-width: 430px) {
.mobile-only {
display: none;
height: 0;
max-height: 0; } }
@media screen and (max-width: 430px) {
.mobile-hide {
display: none !important;
height: 0 !important;
opacity: 0 !important;
max-height: 0 !important; } }
</style>
<!--[if gte mso 9]>
<style>
body, table, td {font-family: Helvetica, Arial, sans-serif !important;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img {
display: block;
}
a .arrow{
font-size: 18px;
margin-right: 10px;
}
.bullet{
font-size: 18px !important;
}
</style>
<![endif]-->
<!--[if lt mso 14]>
<style>
.icon{
height: 0;
width: 0;
display: none;
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0;">
<!-- <img src="phone.PNG" class="img-max" alt=""> -->
<!-- ********** Pre-HEADER ********** -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="section-padding-small">
<div align="center">
<table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="500" >
<tr>
<td class="section-padding-small-bottom">
<table cellspacing="0" cellpadding="0" align="left" border="0" width="25%">
<tr>
<td class="logo" align="center"><img alt="logo" src="logo.png" width="120" height="30">
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="75%" align="right">
<tr>
<td align="right" class="mobile-hide">
<table align="right" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="preheader">
<!-- The below preheader is hidden from view, but exists so the first thing to show up in the preheader isn't the webpage link below -->
Join us for this exclusive workshop.
</td>
<!-- The special characters below help clear the preheader text after the above message, so that we don't end up with "junk" in our content preview, i.e. "View this email as a webpage." -->
<td class="preheader">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</td>
</tr>
<tr>
<td class="view-as-webpage" width="100%" align="right" height="30"><a href="%%view_email_url%%" class="meta">View this email as a webpage.</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- ********** End Pre-HEADER ********** -->
<!-- ********** Header ********** -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-family: 'Helvetica neue', Helvetica, helvetica, Arial, arial, sans-serif;">
<tr>
<td bgcolor="#ffffff" align="center" class="section-padding-large-bottom">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table header">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td >
<!-- Hero image -->
<table class="rounded-large" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="rounded-large" width="500" bgcolor="#002247" align="center" valign="top" style="color: #ffffff; font-size: 30px; font-weight: bold; line-height: 1.2;">
<a href="#" target="_blank" style="text-decoration: none; color: #ffffff;"><img class="img-max" width="500" src="https://dummyimage.com/1000x800/efefef/888888.png&text=[header]" alt="Headline alt text"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End Header ********** -->
<!-- ********** Lead in ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
<tr>
<td class="lead-in">
This is lead-in text. It should only be used for small amounts of text, particularly for leading-in to an email.<span class="superscript">1</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End lead in ********** -->
<!-- Body copy -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
<!-- Paragraph -->
<tr>
<td class="body-copy left">
This is paragraph text. It should be 15px/1.4em for good readability on all devices. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem! <span class="superscript">1</span><br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, deleniti. Debitis nihil at vitae, harum tenetur facere ratione soluta unde, rerum, numquam quo perspiciatis velit nobis. Unde iste repudiandae vitae!
</td>
</tr>
<!-- End paragraph -->
<!-- Bullets -->
<tr>
<td>
<!-- Bullets -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td>
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="470">
<tr>
<td class="margin">
<!-- Each <tr> is a bullet; duplicate them for more -->
<table class="bullets" align="center" cellpadding="2" cellspacing="2" border="0">
<!-- Bullet -->
<tr>
<td width="5%" class="bullet" valign="top">■</td>
<td class="body-copy bullet-text" width="90%" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
<!-- End Bullet -->
<!-- Bullet -->
<tr>
<td width="5%" class="bullet" valign="top">■</td>
<td class="body-copy bullet-text" width="90%" align="left" >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
<!-- End Bullet -->
<!-- Bullet -->
<tr>
<td width="5%" class="bullet" valign="top">■</td>
<td class="body-copy bullet-text" width="90%" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
<!-- End Bullet -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End bullets -->
</td>
</tr>
<!-- End bullets -->
</table>
</td>
</tr>
</table>
<!-- End Body copy -->
<!-- Blockquote -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
<!-- Paragraph -->
<tr>
<td colspan="1" height="10" width="10" bgcolor="#007bc3"></td>
</tr>
<tr>
<td width="10" bgcolor="#007bc3"></td>
<td height="90%" align="center" class="blockquote">
"Blockquote which can be used to emphasize a quote or a piece of language."
</td>
</tr>
<tr>
<td colspan="1" height="10" width="10" bgcolor="#007bc3"></td>
</tr>
<!-- End paragraph -->
</table>
</td>
</tr>
</table>
<!-- End Blockquote -->
<!-- ********** 30-70 column module ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td colspan="2" width="100%" class="subhead h3" align="center">Subhead</td>
</tr>
<tr>
<td>
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="left" border="0" width="29%" valign="top">
<!-- Image -->
<tr>
<td valign="top" align="center">
<img width="142" src="https://dummyimage.com/500x500/efefef/888888.png&text=[184x184]" alt="Image" />
</td>
</tr>
<tr>
<td class="caption">Image caption</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="right" border="0" width="69%" valign="top">
<!-- Paragraph -->
<tr>
<td class="body-copy" valign="top" width="100%">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End 30-70 column module ********** -->
<!-- ********** Two column module ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td>
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="left" border="0" width="49%" valign="top">
<!-- Image -->
<tr>
<td valign="top" width="100%" align="center">
<img width="240" src="https://dummyimage.com/500x500/efefef/888888.png&text=[500x500]" alt="Image" />
</td>
</tr>
<tr>
<td class="meta">Image caption</td>
</tr>
<!-- Subhead -->
<tr>
<td class="subhead h4" align="center">2 Column subhead</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="body-copy" width="100%" valign="top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
<tr>
<td>
<table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="right" border="0" width="49%" valign="top">
<!-- Image -->
<tr>
<td valign="top" width="100%" align="center">
<img width="240" src="https://dummyimage.com/500x500/efefef/888888.png&text=[500x500]" alt="Image" />
</td>
</tr>
<tr>
<td class="meta">Image caption</td>
</tr>
<!-- Subhead -->
<tr>
<td class="subhead h4" align="center">2 Column subhead</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="body-copy" width="100%" valign="top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
<tr>
<td>
<table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End two column module ********** -->
<!-- ********** Three column ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td class="subhead h3">3 column Subhead</td>
</tr>
<tr>
<td align="center">
<!-- Column -->
<table class="column" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Image -->
<tr>
<td align="center" width="100%">
<img width="150" src="https://dummyimage.com/160x160/efefef/888888.png&text=300x300" alt="">
</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="caption">Image caption</td>
</tr>
<tr>
<td class="subhead h4">Column subhead</td>
</tr>
<tr>
<td class="body-copy" align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
<tr>
<td class="mobile-only margin" > </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="mobile-hide" cellspacing="0" cellpadding="0" align="left" border="0" width="1%">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<!-- Column -->
<table class="column" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Image -->
<tr>
<td align="center" width="100%">
<img width="150" src="https://dummyimage.com/160x160/efefef/888888.png&text=300x300" alt="">
</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="caption">Image caption</td>
</tr>
<tr>
<td class="subhead h4">Column subhead</td>
</tr>
<tr>
<td class="body-copy" align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
<tr>
<td class="mobile-only margin"> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="mobile-hide" cellspacing="0" cellpadding="0" align="left" border="0" width="1%">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<!-- Column -->
<table class="column" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Image -->
<tr>
<td align="center" width="100%">
<img width="150" src="https://dummyimage.com/160x160/efefef/888888.png&text=300x300" alt="">
</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="caption">Image caption</td>
</tr>
<tr>
<td class="subhead h4">Column subhead</td>
</tr>
<tr>
<td class="body-copy" align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
</tr>
<tr>
<td align="center" class="body-copy">
<a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
</a>
</td>
</tr>
<tr>
<td class="mobile-only margin"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End Three column ********** -->
<!-- ********** Vertical list ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td width="100%" class="subhead h3">Subhead</td>
</tr>
<!-- List item -->
<tr>
<td class="margin">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td valign="middle" align="center" width="50" height="50">
<img width="50" height="50" src="https://dummyimage.com/100x100/efefef/888888.png&text=100x100" alt="Image" />
</td>
<td width="3%"></td>
<td class="body-copy left" valign="middle" width="87%">
Bullet
</td>
</tr>
</table>
</td>
</tr>
<!-- End list item -->
<!-- List item -->
<tr>
<td class="margin">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="left" border="0" width="500">
<tr>
<td valign="middle" align="center" width="50" height="50">
<img width="50" height="50" src="https://dummyimage.com/100x100/efefef/888888.png&text=100x100" alt="Image" />
</td>
<td width="3%"></td>
<td class="body-copy left" valign="middle" width="87%">
Bullet
</td>
</tr>
</table>
</td>
</tr>
<!-- End list item -->
<!-- List item -->
<tr>
<td class="margin">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="left" border="0" width="500">
<tr>
<td valign="middle" align="center" width="50" height="50">
<img width="50" height="50" src="https://dummyimage.com/100x100/efefef/888888.png&text=100x100" alt="Image" />
</td>
<td width="3%"></td>
<td class="body-copy left" valign="middle" width="87%">
Bullet
</td>
</tr>
</table>
</td>
</tr>
<!-- End list item -->
</table>
</td>
</tr>
</table>
<!-- ********** Vertical list ********** -->
<!-- ********** Small call to action ********** -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" width="100%" class="section-padding">
<table class="responsive-table" width="500" height="150">
<tr>
<td class="margin" align="center">
<span class="cta">[Small call to action]</span>
</td>
</tr>
<!-- Button -->
<tr>
<td class="margin">
<table class="responsive-table" cellspacing="0" cellpadding="0" border="0" align="center">
<td class="button-container rounded-small">
<a href="http://www.google.com" class="button rounded-small">
<!--[if mso]> <![endif]-->Button label<!--[if mso]> <![endif]-->
</a>
</td>
</table>
</td>
</tr>
<!-- End Button -->
<tr>
<td class="margin body-copy" align="center">
<span>[Alternative call to action]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End small call to action ********** -->
<!-- Call to action with image -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" width="100%" class="section-padding">
<table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td align="center">
<table class="responsive-table" width="30%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" align="center">
<img width="150" height="150" src="https://dummyimage.com/150x150/efefef/888888.png&text=[300x300]" alt="">
</td>
<td class="mobile-hide" width="2%"> </td>
</tr>
</table>
<!--[if mso]></td><td width="100%"><![endif]-->
<table class="responsive-table" width="68%" height="150" align="right" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<span class="cta">[Call to action with image]</span>
</td>
</tr>
<!-- Button -->
<tr>
<td class="margin">
<table class="responsive-table" cellspacing="0" cellpadding="0" border="0" align="center">
<td class="button-container rounded-small">
<a href="http://www.google.com" class="button rounded-small">
<!--[if mso]> <![endif]-->Button label<!--[if mso]> <![endif]-->
</a>
</td>
</table>
</td>
</tr>
<!-- End Button -->
<tr>
<td class="margin" align="center">
<span class="body-copy">[Alternative call to action]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Cmall call to action with image -->
<!-- ********** ISA sales info ********** -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" width="100%" class="section-padding">
<table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td class="subhead">
Call your dedicated sales representative:
</td>
</tr>
<tr>
<td align="center" width="100%">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center">
<table align="center" width="500" class="responsive-table" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" align="center" valign="middle">
<img src="https://dummyimage.com/105x105/efefef/888888.png&text=[Headshot]" alt="Headshot" width="105" height="auto" border="0">
</td>
<td width="3%"> </td>
<td class="body-copy left" width="76%" align="left" valign="middle">
[ISA name]
<br> <span class="meta">[ISA title]
<br> [ISA phone]
<br>
<a href="#">[ISA email]</a>
</span>
</td>
</tr>
<!-- Button -->
<tr>
<td align="center" class="body-copy">
<a href="#" style="color:#007bc3;" target="_blank"><span style="padding-right: 10px;">👋</span><span class="link-text">Meet me</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- This is where the headshot version and three column version are divided. Delete everything above this line, or below this line. -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td class="subhead">
Call your dedicated sales representative:
</td>
</tr>
<tr>
<td align="center" width="100%">
<table cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<!-- Column -->
<table class="responsive-table" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Paragraph -->
<tr>
<td class="body-copy" align="center" width="100%">
[Name]
<br> <span class="meta">[Title]
<br> [Phone]
<br>
<a href="#">[Email]</a>
</span>
</td>
</tr>
<tr>
<td>
<table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td align="center"><![endif]-->
<table class="mobile-hide" cellspacing="0" cellpadding="0" align="left" border="0" width="1%">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td width="32%" align="center"><![endif]-->
<!-- Column -->
<table class="responsive-table" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Paragraph -->
<tr>
<td class="body-copy" align="center" width="100%">
[Name]
<br> <span class="meta">[Title]
<br> [Phone]
<br>
<a href="#">[Email]</a>
</span>
</td>
</tr>
<tr>
<td>
<table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td align="center"><![endif]-->
<table class="mobile-hide" cellspacing="0" cellpadding="0" align="left" border="0" width="1%">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td width="32%" align="center"><![endif]-->
<!-- Column -->
<table class="responsive-table" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
<!-- Paragraph -->
<tr>
<td class="body-copy" align="center" width="100%">
[Name]
<br> <span class="meta">[Title]
<br> [Phone]
<br>
<a href="#">[Email]</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End ISA sales info ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%" bgcolor="#002247">
<tr>
<td>
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" height="130" width="500">
<tr>
<td>
<table class="responsive-table" cellpadding="2" cellspacing="0" width="500" align="center">
<tr>
<td class="meta" align="left">
<span style="color: #ffffff;">
This email was sent by:
<b>%%Member_Busname%%</b><br>
%%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%<br><br>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>