Multi-column template (right image)
Multi-column template (right image) has two columns, a header image, and image on the right, and text on the left.
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Medallia HTML Template</title>
<style type="text/css">
/* Take care of image borders and formatting */
img { max-width:600px !important; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; }
a img { border:none; }
/* Responsive Styles*/
@media only screen and (max-width:600px){
/* set column image maximum width for mobile screens */
img[class="columnImage"]{ height:auto !important; max-width:280px !important; width:100% !important; }
table[id="emailContainer"]{ width:100% !important; }
table[class="columnContainer"]{ width:100% !important; }
table[class="mobileButton"] { width:60% !important; }
td[class="columnSingle"] { display:block !important; width:100% !important; }
}
</style>
</head>
<body bgcolor="#efefef" style="background-color:#efefef; -webkit-text-size-adjust: none; padding:0;">
<!-- START WRAPPER TABLE -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" id="emailContainer" style="display:block; max-width:600px; background-color:#ffffff; width:100%!important;">
<tr>
<td align="center" valign="top">
<!-- START CONTENT TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td><!-- START HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"><!-- PADDING: cellpadding can be changed, check every table that has content for consitent padding. -->
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- HEADER IMAGE
Images need to have the width and height specified. The style property "display:block" is necessary to get rid of unwanted margins in some older email clients. Remember that email clients have images turned off by default, alternate text "alt-text" is necessary. The color, background-color and font styles are for the alt-text in case images are turned off. -->
<img src="http://placehold.it/600x200" width="600" height="200" border="0" alt="some text" style="display:block; color:#efefef; text-align:center; font-family:Arial; font-size:28px; font-weight:bold; background-color:#2A80B9;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td><!--///END HEADER///-->
</tr>
<tr>
<td><!--+++START BODY+++-->
<table border="0" cellpadding="10" cellspacing="0" width="100%"><!-- PADDING: cellpadding can be changed, check every table that has content for consitent padding -->
<tr>
<td colspan="2" align="center" valign="top"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom -->
<span style="font-family:Arial; font-size:16px; color:#888888;">
This text will be center aligned
</span>
<br />
<br />
<div style="text-align:left;"><!-- Use div with texy-align to change main alignment, the text inside this div will be left aligned -->
<span style="font-family:Arial; font-size:16px; color:#888888;">
<b>Dear $FIRSTNAME$,</b><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula, molestie et enim sit amet, vehicula ornare purus. Aliquam a libero mi. Nunc sem orci, ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum.
</span>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" width="50%" class="columnSingle"><!-- LEFT COLUMN -->
<table border="0" cellpadding="10" cellspacing="0" width="100%"><!-- PADDING: cellpadding can be changed, check every table that has content for consitent padding -->
<tr>
<td class="columnContent">
<span style="font-family:Arial; font-size:16px; color:#666666;">Ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum. </span>
<br />
<br />
<br />
<br />
<!-- BUTTON
The <div> surrounding the button will allow you to align the button left, center or right. The commented area is for some versions of Microsoft Outlook. If colors are changed, they need to be changed in both, the commented and the uncommented sections of the button. -->
<div style="text-align:center;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="$SECURE_SURVEY_URL$" style="height:42px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#666666">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Go to survey</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]-->
<a href="$SECURE_SURVEY_URL$" class="mobileButton" style="background-color:#666666;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:42px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Go to survey</a>
<!--[endif]-->
</div>
<br />
<br />
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="columnSingle"><!-- RIGHT COLUMN -->
<table border="0" cellpadding="10" cellspacing="0" width="100%"><!-- PADDING: cellpadding can be changed, check every table that has content for consitent padding -->
<tr>
<td class="columnContent">
<!--IMAGE LINK
Images need to have the width and height specified, style property display:block is necessary to get rid of unwanted margins in some older email clients. email clients have images turned off my default, alt-text is necessary, extra styles are for alt-text. -->
<a href="http://" style="text-decoration:none;"><img src="http://placehold.it/280x280" width="280px" height="280px" border="0" alt="some text" style="display:block; max-width:280px; color:#efefef; text-align:center; font-family:Arial; font-size:28px; font-weight:bold; background-color:#2A80B9;" class="columnImage" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom. -->
<span style="font-family:Arial; font-size:16px; color:#666666;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula, molestie et enim sit amet, vehicula ornare purus. Aliquam a libero mi. Nunc sem orci, ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum.
<br/>
<br/>
Thank you!<br/>
John Doe<br/>
VP, Customer Experience<br/>
</span>
</td>
</tr>
</table>
</td><!--///END BODY///-->
</tr>
<tr>
<td><!--+++START FOOTER+++-->
<table border="0" cellpadding="10" cellspacing="0" width="100%" style="background-color:#F6F6F6; border-top-color:#EEEEEE; border-top-style:solid; border-top-width:1px;"><!-- PADDING: cellpadding can be changed, check every table that has content for consistent padding -->
<tr>
<td align="left" valign="top" style="line-height:12px;"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom -->
<span style="font-family:Arial; font-size:12px; color:#888888;">
Please do not "Reply" to this invitation.<br /><br />
This survey invitation will expire on $EXPIRATIONDATE_PRETTY$.<br /><br />
Should you have any problems accessing or completing the survey, please visit <a href="http://surveysupport.medallia.com/s/?id=$SECURE_SURVEY_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;">surveysupport.medallia.com</a>. You received this email because you provided your email address to $COMPANY_NAME$. If you would like to opt out from receiving future surveys, please click <a href="$OPT_OUT_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;"><span style="font-family:Arial; color:#9999ff; text-decoration:none;">here</span></a>.<br /><br />
<a href="" style="font-family:Arial; color:#9999ff; text-decoration:none;">$COMPANY_NAME$ Privacy Policy</a><br /><br />
</span>
</td>
</tr>
</table>
</td><!-- END FOOTER -->
</tr>
</table><!-- END CONTENT TABLE -->
</td>
</tr>
</table><!-- END WRAPPER TABLE -->
$TRACK_INVITE_EMAIL_OPEN$
</body>
</html>