Create a Discussion

Multi Column Responsive Design for Gmail App!

Jeff Dunton posted 2015-11-10 15:33:08

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

Randy Brooks replied 2015-11-10 15:45:11

Looks nice. Great job!

Reply to Randy Brooks

Jeff Dunton replied 2015-11-10 16:09:19

Thanks Randy!

Sam Sexton replied 2015-11-10 16:40:28

The link doesn't work for me!

Reply to Sam Sexton

Jeff Dunton replied 2015-11-10 17:42:48

hmmm....not sure why that isn't working....here is the full code that you can paste into builder:

<head>

@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>

<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>

</td>

</tr>

<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>

<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>

<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 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>

<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>

</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>

<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>

<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>

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Multi Column Responsive Design for Gmail App!

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password