Bulletproof Email Components

HTML components that work in all email clients.

Making things round in email is hard. Here we use images to get a rounded button effect.

<table cellpadding="0" cellspacing="0" width="200" height="47">
<tr>
<td width="6" height="47" valign="bottom">
  <img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_1/purple/button-left.png"
    width="6" height="47" border="0" alt=""
    style="margin:0;padding:0;display:block;">
</td>
<td style="background-color:#852b99;color:#ffffff;" align="center">
  <a href="#" style="color:#ffffff;">
    Purple Button
  </a>
</td>
<td width="6" height="47" valign="bottom">
  <img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_1/purple/button-right.png"
    width="6" height="47" border="0" alt=""
    style="margin:0;padding:0;display:block;">
</td>
</tr>
</table>
    

Social buttons are a great way to spread the word. Here are the popular ones.

Twitter

Google Plus

Pinterest

Facebook

<a href="http://twitter.com/share?url=https%3A%2F%2Fwww.sendwithus.com%2Fbulletproof-examples%2F&text=I%20love%20sendwithus!&via=send_with_us" target="_blank">
<img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_share/twitter.png" alt="" width="57" height="57" />
</a>

<a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.sendwithus.com" target="_blank">
<img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_share/googleplus.png" alt="" width="57" height="57" />
</a>

<a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.sendwithus.com%2Fbulletproof-examples%2F&amp;description=Common%20HTML%20Email%20Components" target="_blank">
<img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_share/pinterest.png" alt="" width="57" height="57" />
</a>

<a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.sendwithus.com%2Fbulletproof-examples%2F" target="_blank">
<img src="https://d2icp80q7g7kp0.cloudfront.net/img/examples/button_share/facebook.png" alt="" width="57" height="57" />
</a>
    

Image captions are a good way to add context to an image.

This is a kitten
<table cellpadding="5" cellspacing="0" width="310" border="0">
<tr>
<td style="padding:10px;background-color:#eeeeee;" align="center">
<img src="http://placekitten.com/g/200/300" alt="" />
<div style="padding-top:10px;color:#444444">This is a kitten</div>
</td>
</tr>
</table>
    

Google has an API that generates map images on the fly. We simply need to pass latitude and longitude to the image URL.

Visit Google Maps API Documentation

<table>
<tr>
<td>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=37.7833,-122.4167&zoom=11&size=300x200&sensor=false&markers=color:red%7Clabel:A%7C37.762573,-122.450180">
</td>
</tr>
</table>
    

To make a progress bar we simply need to create a table with two columns. To get the fill percentage we apply a background color to the first column.

20%  

45%  

91%  
<table cellpadding="0" cellspacing="0" width="300">
<tr>
<td style="background-color:#27a9e3;padding:10px;color:#ffffff;" width="70%">
70%
</td>
<td style="background-color:#eeeeee;padding:10px;color:#333333;" width="30%">
&nbsp;
</td>
</tr>
</table>