JD
1
Multi Column Responsive Design for Gmail App!
Hey all,
This is my first time posting here, and I'm looking to get some feedback. I have developed a code that can stack multi columns (2, 3 or more) within the Gmail App. The code renders beautifully across all the major email clients (from desktop to mobile), and is fairly straight forward and clean. Please have a look!
Thanks,
Jeff Dunton
Senior Custom Template Developer
Constant Contact
jdunton@constantcontact.com
Looks nice. Great job!
Thanks Randy!
The link doesn't work for me!
hmmm....not sure why that isn't working....here is the full code that you can paste into builder:
<html xmlns:cctd="http://www.constantcontact.com/cctd" xml:lang="en" lang="en">
<head>
<style> [data-is-visible="false"],[data-is-visible="false"] { display:none; }
@media only screen and (max-width:639px) {
*[class~="OneColumnMobile"] {
width:100% !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
*[class~="OneColumnMobile"] img {
min-width:1px !important;
max-width:100% !important;
height:auto !important;
}
*[class~="MobCenter"] {
display:block !important;
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
*[class~="MobCenterText"] {
text-align:center !important;
}
*[class~="MobLeft"] {
display:block !important;
float:left !important;
}
*[class~="MobLeftText"] {
text-align:left !important;
}
*[class~="MobLeftImage"] img {
float:left !important;
}
*[class~="MobRight"] {
display:block !important;
float:right !important;
}
*[class~="MobRightText"] {
text-align:right !important;
}
*[class~="MobRightImage"] img {
float:right !important;
}
*[class~="MobFullWidth"] {
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
width:100% !important;
max-width:100% !important;
}
*[class~="MobAutoWidth"] {
width:auto !important;
}
*[class~="MobAutoWidthImage"] img {
width:auto !important;
}
*[class~="MobNoMaxWidthImage"] img {
max-width:none !important;
}
*[class~="MobNoMinWidth"] {
min-width:none !important;
}
*[class~="MobTopPad"] {
padding-top:12px !important;
}
*[class~="MobTopMar"] {
margin-top:12px !important;
}
*[class~="MobBottomPad"] {
padding-bottom:15px !important;
}
*[class~="MobBottomMar"] {
margin-bottom:15px !important;
}
*[class~="MobLeftPad"] {
padding-left:12px !important;
}
*[class~="MobLeftMar"] {
margin-left:12px !important;
}
*[class~="MobRightPad"] {
padding-right:12px !important;
}
*[class~="MobRightMar"] {
margin-right:12px !important;
}
*[class~="MobNoSidePad"] {
padding-left:0px !important;
padding-right:0px !important;
}
*[class~="MobNoSideMar"] {
margin-left:0px !important;
margin-right:0px !important;
}
*[class~="MobInlineBlockLinks"] a {
display:inline-block !important;
}
*[class~="MobBlock"] {
display:block !important;
}
*[class~="MobInline"] {
display:inline !important;
}
*[class~="MobInlineBlock"] {
display:inline-block !important;
}
*[class~="MobTable"] {
display:table !important;
}
*[class~="MobRow"] {
display:table-row !important;
}
*[class~="MobCell"] {
display:table-cell !important;
}
*[class~="MobHide"] {
display:none !important;
}
*[class~="ContentWidth"] {
width:100% !important;
}
}
html, body {
min-width:100%;
padding:0px;
margin:0px;
}
a {
color:inherit;
}
table, .OneColumnMobile, .CC_NoEdit, .CC_Divider {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
th {
vertical-align:top;
}
.OutlookLineHeightFix {
mso-line-height:exactly;
}
.OneColumnMobile img {
min-width:1px;
max-width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OuterTable OuterBG" style="text-decoration:none; title:Outer Background; background-color:#000000 ;">
<tr>
<td align="center" class="OuterSidePadding TopMarginBG" style="padding-left:8px; padding-right:8px; text-decoration:none;">
<div align="center" style="margin-left:auto;margin-right:auto; max-width:602px; text-decoration:none;" class="TemplateMaxWidth TopMarginMaxWidth MobFullWidth">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
<td align="center" valign="top" class="TemplateMainWidth TopMarginWidth TopMarginOuter MobFullWidth" style="width:600px; text-decoration:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="center" valign="top" class="TopMargin" style="padding:15px 0px 0px 0px;">
<div title="Top Content" data-is-visible="false">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" valign="top" class="OuterText OuterContent" style="title:Outer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding:10px 25px 10px 25px;">
<div>
The sentence after your subject line should grab the reader's attention.<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" class="OuterSidePadding SideMarginBG" style="padding-left:8px; padding-right:8px; text-decoration:none;">
<div align="center" style="margin-left:auto;margin-right:auto; max-width:602px;" class="TemplateMaxWidth MobFullWidth">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
<td align="center" valign="top" class="TemplateMainWidth MobFullWidth" style="width:600px;">
<div class="MainDiv" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="MainTable" style="-webkit-box-shadow: 0px 0px 75px -10px rgba(255,255,255,1);-moz-box-shadow: 0px 0px 75px -10px rgba(255,255,255,1);box-shadow: 0px 0px 75px -10px rgba(255,255,255,1); margin-left:auto; margin-right:auto;">
<tr>
<td width="100%" align="center" valign="top" class="OuterBorderColor OuterBorder" style="background-color:#ffffff; padding:0px 0px 0px 0px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="InnerBGColor" style="title:Inner Background Color; background-color:#ffffff;">
<tr>
<td width="100%" align="center" valign="top" class="Top" style="padding:0px 0px 0px 0px;">
<div title="Top Full Image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText TopFullImage" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:0px 0px 0px 0px;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="max-width:100%;">
<tr>
<td width="1%" style="padding:0px 0px 0px 0px;">
<div align="center"><img alt="" width="600" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_2to1.png" style="display:block;min-width:100%" /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top" class="MiddleOuter" style="padding:0px 0px 0px 0px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top" class="TopMiddle" style="padding:0px 0px 0px 0px;">
<div title="Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText ArticleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:20px 25px 20px 25px;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText Content" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:0px 0px 0px 0px;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi. In quis pharetra ipsum, a volutpat orci. Sed facilisis convallis quam, eu dictum nibh varius at. Aenean volutpat sodales risus. Lorem ipsum dolor sit amet, consectetur adipiscing.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div title="Section Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="SectionHeadingBGColor" style="title:Section Heading Background Color; background-color:#000001; min-width:100% !important;">
<tr>
<td align="left" valign="top" class="SectionHeadingText SectionHeading" style="title: Section Heading Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 10pt ; font-weight:bold ; color: #ffffff ; padding: 20px 25px 20px 25px ;">
<div>Section Heading</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="MainText EventsBGColor" style="font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; title: Events Background Color ; background-color: #ECF0F1 ; min-width:100% !important ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div title="Events Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<div>HEADING HERE<br /></div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
<br />
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div title="Events Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<div>HEADING HERE<br /></div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div title="Events Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<div>HEADING HERE<br /></div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="BottomMiddle" style="padding:0px 0px 0px 0px;">
<div title="Full Article Image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText FullContentImage" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 20px 25px 0px 25px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="max-width:100%;">
<tr>
<td width="1%" style="padding:0px 0px 0px 0px;">
<div align="center"><img alt="" width="550" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_3to1.png" style="display:block;min-width:100%" /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div title="Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText ArticleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:20px 25px 20px 25px;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText Content" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:0px 0px 0px 0px;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi. In quis pharetra ipsum, a volutpat orci. Sed facilisis convallis quam, eu dictum nibh varius at. Aenean volutpat sodales risus. Lorem ipsum dolor sit amet, consectetur adipiscing.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div title="Article w/ Right Image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="left" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="370" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="210" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 0px 0px ;">
<div align="center"><img alt="" width="180" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="display:block;min-width:100% !important;" /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Article w/ Left Image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="210" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 0px 0px ;">
<div align="center"><img alt="" width="180" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="display:block;min-width:100% !important;" /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="370" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Double Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="260" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="260" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title="Triple Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText TripleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top" class="Bottom" style="padding:0px 0px 0px 0px;">
<div title="Social Media">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContactInfoBGColor" style="title: Contact Info Background Color ; background-color:#ffffff; min-width:100% !important;">
<tr>
<td align="center" class="ContactInfoText ContactInfoOuter" style="title: Contact Info Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 9pt ; line-height:1.3 ; color:#131C1C; padding:35px 25px 10px 25px;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="center" valign="top" class="ContactInfoText ContactInfo" style="title: Contact Info Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 9pt ; line-height:1.3 ; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<b>Company Name</b><br />
Phone | Fax | Email | Website<br />
<table width="1" cellpadding="0" cellspacing="0" border="0" style="display:inline-block !important;width:auto !important;" class="CC_NoEdit">
<tr>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Facebook" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Facebook.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Twitter" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Twitter.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="LinkedIn" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_LinkedIn.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Pinterest" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Pinterest.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="YouTube" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_YouTube.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="RSS" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_RSS.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div title="Footer">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="FooterBGColor" style="title:Footer Background Color; background-color:#000000; min-width:100% !important;">
<tr>
<td align="center" class="FooterText FooterOuter" style="title:Footer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding: 7px 25px 7px 25px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="center" valign="top" class="FooterText Footer" style="title:Footer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; text-decoration:none;">
<div>
Optional Text Here<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" class="OuterSidePadding BottomMarginBG" style="padding-left:8px; padding-right:8px; text-decoration:none;">
<div align="center" style="margin-left:auto;margin-right:auto; max-width:602px; text-decoration:none;" class="TemplateMaxWidth BottomMarginMaxWidth MobFullWidth">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
<td align="center" valign="top" class="TemplateMainWidth BottomMarginWidth BottomMarginOuter MobFullWidth" style="width:600px; text-decoration:none; padding:0px 0px 0px 0px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="center" valign="top" class="BottomMargin" style="padding:0px 0px 15px 0px;">
<div title="Bottom Content" data-is-visible="false">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" valign="top" class="OuterText OuterContent" style="title:Outer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding:10px 25px 10px 25px;">
<div>
Copyright © 20XX. All Rights Reserved.<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>