Bulletproof Email Components

HTML components that work in all email clients.

Rounded Buttons

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

<table width=”200″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td valign=”bottom” width=”6″ height=”47″><img style=”margin: 0; padding: 0; display: block;” src=”https://d1pgqke3goo8l6.cloudfront.net/lMC2Rm0QLqcQjTlDf9ld_button-left.png” alt=”” width=”6″ height=”47″ border=”0″ /></td>
<td style=”background-color: #852b99; color: #ffffff;” align=”center”><a style=”color: #ffffff;” href=”#”> Purple Button </a></td>
<td valign=”bottom” width=”6″ height=”47″><img style=”margin: 0; padding: 0; display: block;” src=”https://d1pgqke3goo8l6.cloudfront.net/9I1RPWhiSiOvEHLJhC70_button-right.png” alt=”” width=”6″ height=”47″ border=”0″ /></td>
</tr>
</tbody>
</table>

Social Buttons

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

<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://d1pgqke3goo8l6.cloudfront.net/Ck9DawIQZCFXGFzOScCA_twitter.png" alt="" width="57" height="57" />


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


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


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

 

Image Captions

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

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

Progress Bars

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.

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

Ready to get started?

Try Sendwithus

Or contact us to request a demo