Solved
Spacing issues in Marketo and Outlook
Hello all -
First off, I am not a developer. I have basically pulled parts of code from multiple email templates, so please be kind on that front.
My issue is spacing. It seems like Marketo is adding extra space around my variables, so what's rendering in Marketo does not match the Outlook desktop version. Code is below:
<!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" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="spacerBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="spacerColor" mktoname="Spacer Color" default="#007ac3" mktomodulescope="true" />
<meta class="mktoNumber" id="spacerSpacer" mktoname="Spacer Height" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="Barspacertop" mktoname="Spacer Top" default="32" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ColoredBarheight" mktoname="Color Bar Height" default="6" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="Barspacerbottom" mktoname="Spacer Bottom" default="32" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="freeImageBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="freeTextBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoNumber" id="Spacerhero" mktoname="Space Before Hero" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="freeTextSpacer" mktoname="Space Before Text" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="freeTextSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Background Color" default="#474747" mktomodulescope="true" />
<meta class="mktoNumber" id="footerSpacer" mktoname="Space Before Text" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="footerSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="ctaBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoString" id="ctaLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" />
<meta class="mktoString" id="ctaLinkText" mktoname="Button Label" default="Call to Action Text" mktomodulescope="true" />
<meta class="mktoColor" id="ctaButtonColor" mktoname="Button Color" default="#007AC3" mktomodulescope="true" />
<meta class="mktoNumber" id="ctaSpacer" mktoname="Space Before Button" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<!-- Other Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Fira Sans, Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Fira Sans, Arial, sans-serif !important;
}
</style>
<![endif]-->
<style>
/*startcommon*/
@media only screen and (max-width: 800px) {
table#boxing{
width: 100% !important;
}
}
/*endcommon*/
</style>
<!--[if gte mso 9]>
<style type="text/css">
#hero .table3-3{
width: 100% !important;
}
</style>
<![endif]-->
<style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
color: #000;
text-decoration: none;
}
.appleFooter a {
color: #000;
text-decoration: none;
}
@-ms-viewport {
width: device-width;
}
h1 {
font-family: Fira Sans, Arial, sans-serif !important;
font-size: 24px !important;
line-height: 30px !important;
text-align: left !important;
}
h2 {
font-family: Fira Sans, Arial !important;
font-size: 45px !important;
line-height: 40px !important;
text-align: left !important;
font-weight: 200 !important;
}
p {
font-family: Fira Sans, Arial !important;
text-align: left !important;
}
p .footer {
font-family: Fira Sans, Arial !important;
color: #ffffff !important;
text-align: left !important;
font-size: 12px !important;
}
</style>
<style media="all">
@media only screen and (max-width: 640px) {
/*starttablet*/
body {
width: auto !important;
}
table.table-inner{
width: 86% !important;
}
table.table2-3{
width: 64% !important;
}
table.table3-3{
width: 100% !important;
clear: both;
}
table.footer-logo{
width: 10% !important;
text-align: right !important;
}
td.outer{
min-width: 0 !important;
}
td.stack{
padding-bottom: 40px !important;
}
.stack-tablet {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
mso-hide: none !important;
display: block !important;
}
img.mobile-img{
width: 100% !important;
height: auto !important;
}
td.hide-tablet{
display: none !important;
}
table.footer-column{
width: 47% !important;
text-align: left !important;
}
.m_free-image img {
width: 450px !important;
}
/*endtablet*/
}
@media only screen and (max-width: 479px) {
/*startmobile*/
body {
width: auto !important;
}
td.colorbar {
line-height: 4px !important;
font-size: 8px !important;
}
.secondary-font-text h1 {
font-size: 18px !important;
line-height: 25px !important;
}
.secondary-font-text h3 {
font-size: 16px !important;
line-height: 20px !important;
font-weight: 500 !important;
}
.secondary-font-text p {
font-size: 14px !important;
line-height: 20px !important;
text-align: left !important;
}
.secondary-font-text li {
font-size: 14px !important;
line-height: 20px !important;
text-align: left !important;
}
.footer p {
font-size: 12px !important;
line-height: 16px !important;
color: #ffffff !important;
}
table.table600 {
width: 320px !important;
}
table.table-inner{
width: 90% !important;
float: none !important;
}
table.table2-3{
width: 100% !important;
}
table.table3-3 {
width: 50% !important;
clear: both;
}
table.footer-logo{
width: 60% !important;
}
td.outer {
min-width: 0 !important;
}
td.td3-1 {
width: 60% !important;
}
img.mobile-img{
width: 100% !important;
}
td.hide-smartphone{
display: none !important;
}
table.footer-column{
width: 100% !important;
}
.m_hr .table-inner {
width: 100% !important;
}
td.footer img {
width: 20px !important;
height: 20px !important;
}
.m_footer p {
color: #ffffff !important;
}
/*endmobile*/
}
a:link {
color:#007ac3;
text-decoration:underline;
}
a:visited {
color:#007ac3;
text-decoration:underline;
}
a:active {
color:#007ac3;
text-decoration:underline;
}
a:hover {
color:#007ac3;
text-decoration:underline;
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
</div>
<!-- Outer table START -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 570px; border-collapse: collapse; background-color: #ededed">
<table width="600" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: #ffffff">
<tbody>
<tr>
<td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="mktoModule m_spacer" id="spacer" mktoname="spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="headera5c7b734-23d5-49d5-b4d3-c6de1953fdad" mktoname="header-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="table3-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="175">
<tbody>
<tr>
<td class="logo" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div style="display:inline-block" class="mktoImg" id="logof81b1e2a-0eeb-444a-a37f-e001212a360b" mktoname="Logo" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"><img style="" height="auto" width="175" /></a>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-bar" mktoname="spacer-bar" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_hero-text" id="heroa41cc562-c9d4-46b9-8ff3-7c841ed0c801" mktoname="hero" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font-text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; background-color:${freeImageBackgroundColor}; font-family: Fira Sans, Arial, sans-serif;font-size: 16px;line-height: 24px;color: #232323;border-collapse: collapse;">
<div class="mktoText" mktoname="hero-text" id="hero-text4a66edd3-a028-4845-b94b-df9a2d224f4d">
<p><span style="color: #232323; font-family: 'Fira Sans', Arial; font-size: 45px; line-height: 50px; font-weight: 300;">Email headline</span></p>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor}; line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};" height="${freeTextSpacer2}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="hero" mktoname="hero" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Spacerhero};font-size:${Spacerhero}; background-color: ${freeImageBackgroundColor};" height="${Spacerhero}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div class="mktoImg" id="hero-image" mktoname="hero-image" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"> <img style="" width="570" /> </a>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="hero621450e7-f714-46cd-ace9-5d3cd8f2eb88" mktoname="hero-clone-clone-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font-text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; background-color:${freeImageBackgroundColor}; font-family: Fira Sans, Arial;font-size: 16px;line-height: 24px;color: #232323;border-collapse: collapse;">
<div class="mktoText" mktoname="hero-text" id="hero-text4b72cd1b-d5cd-42b9-ad52-574823c8b504">
<p><a href="https://mylink" target="_blank" id="">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
</ul>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor}; line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};" height="${freeTextSpacer2}"> </td>
</tr>
<tr style="outline: medium none;">
<td class="cta" style="mso-line-height-rule: exactly; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table style="border-spacing: 0; border-collapse: collapse; mso-table-lspace: -1pt; mso-table-rspace: -1pt;" align="left" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="buttoncell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" bgcolor="${ctaButtonColor}"> <a href="${ctaLink}" target="_blank" class="primary-font-button" style="-webkit-text-size-adjust:
100%;-ms-text-size-adjust: 100%;border-left-color:${ctaButtonColor};font-size: 14px;font-family: Fira Sans, Arial;color: #ffffff;padding-top: 12px;padding-right: 32px;padding-bottom: 12px;padding-left: 32px;display: inline-block;border-top-style: solid;border-right-style:
solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${ctaButtonColor};border-right-color:${ctaButtonColor};border-bottom-color:${ctaButtonColor};text-decoration: none;background-color:${ctaButtonColor};">${ctaLinkText}</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-barfe79d3ae-a358-44dd-b5d2-3699ff9c5fe4" mktoname="spacer-bar-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_footer" id="footer" mktoname="footer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${footerBackgroundColor};" bgcolor="${footerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: ${footerBackgroundColor};" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
<tr>
<td class="footer" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family: Fira Sans, Arial;font-size: 12px;line-height: 16px;color: #ffffff;border-collapse: collapse;background-color: ${footerBackgroundColor};">
<div class="mktoText" mktoname="footer-text" id="footer-text">
<div style="font-family: fira sans, arial; font-size: 12px; line-height: 25px; color: #ffffff; font-weight: 300px;">
<p><span style="font-size: 12px; color: #ffffff;"><a href="https://mylink" target="_blank" style="color: #ffffff;">Contact us</a> | <a href="https://mylink" style="color: #ffffff;" target="_blank">Email preferences</a> | <a href="https://mylink" style="color: #ffffff;" target="_blank">Unsubscribe</a></span></p>
<p><br /></p>
<p><span style="color: #ffffff; font-size: 12px;"><a href="https://mylink" target="_blank" title="LinkedIn" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/linkedin.png" alt="LinkedIn" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="Twitter" style="color:
#ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/twitter.png" alt="Twitter" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="Facebook" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/facebook.png" alt="Facebook" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="YouTube" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/youtube.png" alt="YouTube" height="30" width="30" constrain="true" imagepreview="false" /></a></span></p>
</div>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${footerSpacer};font-size:${footerSpacer};background-color: ${footerBackgroundColor};" height="${footerSpacer}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="table3-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="175">
<tbody>
<tr>
<td class="center-tablet logo" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div style="display:inline-block" class="mktoImg" id="logo1f71d567-c429-4d13-a012-260612760ce72" mktoname="Logo2" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"><img src="https://info.wkelmsolutions.com/rs/874-VIE-290/images/ButtonBackground_EAB2014.png" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; max-width: 100%; line-height: 100%; width: 175px; display: inline-block; height: auto;" height="auto" width="175" /></a>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${footerSpacer2};font-size:${footerSpacer2};background-color: ${footerBackgroundColor};" height="${footerSpacer2}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-21cc2114d-5ea2-4973-a5fc-761241b47395" mktoname="spacer-2-clone-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!-- Outer Table END -->
</body>
</html>