Add reviews or client testimonials to your emails
The Testimonial in Acorn comes in very handy when you need to add a quote or user message to your emails.
Avatar
Centered, with a user avatar image and some text.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" style="padding: 0 100px;">
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col px-sm-16" align="center" width="100%">
<img src="https://i.imgur.com/pX1z2AY.png" width="50" alt="Avatar">
<h3 style="font-weight: 300; font-style: italic;">Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.</h3>
<small style="color: #969AA1; text-transform: uppercase;">Steve Jobs</small>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
</td>
</tr>
</table>
Border
Simple, with left-aligned text, and a thin border on the left.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" style="padding: 0 60px;">
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col pl-sm-16" width="100%" style="border-left: 1px solid #EEEEEE; padding-left: 30px;">
<h3 style="font-weight: 500; font-style: italic; margin-top: 0;">Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.</h3>
<small style="color: #969AA1; text-transform: uppercase;">Steve Jobs</small>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
</td>
</tr>
</table>
Icon
Similar to the previous one, this Testimonial removes the left border in favour of a quote icon.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="100%" style="padding: 0 8px;">
<img src="https://i.imgur.com/U1j9njD.png" alt="Quote" width="33">
<h3 style="font-weight: 500; font-style: italic;">Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.</h3>
<small style="color: #969AA1; text-transform: uppercase;">Steve Jobs</small>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 40px; height: 40px!important;"></div>
</td>
</tr>
</table>