Multi-column template (left image)
Multi-column template (left image) has two columns, a header image, and image on the left, and text on the right.
Template 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: cell-padding can be changed, check every table that has content for consistent 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 consistent 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="$SECURE_SURVEY_URL$" 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>
<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">
<span style="font-family:Arial; font-size:16px; color:#888888;">Ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum. </span>
<br />
<br />
<span style="font-family:Arial; font-size:16px; color:#888888;">
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>
<br />
</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>