Templates
Download File
Sent to enable the download of a file.
Test Results
PassingWant proof? View the test results to see how a download file template renders across each of the most common email clients.
Example
Import the code below into your Email Service Provider (ESP) to create a download file email.
Download File Starter Email Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="x-apple-disable-message-reformatting" /> | |
| <!--[if mso]> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <![endif]--> | |
| <title>Download File</title> | |
| <style type="text/css"> | |
| /* === Custom Fonts === */ | |
| /* Add your fonts here via imports */ | |
| /* === Client Styles === */ | |
| #outlook a {padding: 0;} | |
| .ReadMsgBody {width: 100%;} .ExternalClass {width: 100%;} | |
| .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} | |
| body, table, td, p, a, li, blockquote {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} | |
| table, td {mso-table-lspace: 0pt; mso-table-rspace: 0pt;} | |
| img {-ms-interpolation-mode: bicubic;} | |
| /* === Reset Styles === */ | |
| body, p, h1, h3 {margin: 0; padding: 0;} | |
| img {border: 0; display: block; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none;} | |
| table, td {border-collapse: collapse} | |
| body {height: 100% !important; margin: 0; padding: 0; width: 100% !important;} | |
| /* === Page Structure === */ | |
| /* | |
| Set the background color of your email. Light neutrals or your primary brand color are most common. | |
| */ | |
| body { | |
| background-color: #f8fafc; /* Edit */ | |
| } | |
| /* | |
| This optional section will be hidden in your email but the text will appear after the subject line. | |
| */ | |
| #preheader {display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;} | |
| /* | |
| Set the background color, border and radius of your primary content area. White or light neutrals for the background-color are recommended. | |
| */ | |
| .panel-container { | |
| background-color: #ffffff; /* Edit */ | |
| border: 1px solid #eaebec; /* Edit */ | |
| border-collapse: separate; | |
| border-radius: 2px; /* Edit */ | |
| } | |
| /* | |
| Set the horizontal padding of your content areas. Any changes should following the default spacing scale. | |
| */ | |
| #header, #footer {padding-left: 32px; padding-right: 32px;} | |
| .panel-body {padding-left: 32px; padding-right: 32px;} | |
| /* | |
| Set the sizes of your spacer rows. Spacers are used for vertical padding. Any changes should following the default spacing scale. | |
| */ | |
| .spacer-xxs, .spacer-xs, .spacer-sm, .spacer-md, .spacer-lg, .spacer-xl, .spacer-xxl {display: block; width: 100%;} | |
| .spacer-xxs {height: 4px; line-height: 4px;} | |
| .spacer-xs {height: 8px; line-height: 8px;} | |
| .spacer-sm {height: 16px; line-height: 16px;} | |
| .spacer-md {height: 24px; line-height: 24px;} | |
| .spacer-lg {height: 32px; line-height: 32px;} | |
| .spacer-xl {height: 40px; line-height: 40px;} | |
| .spacer-xxl {height: 48px; line-height: 48px;} | |
| /* === Page Styles === */ | |
| /* | |
| Set the font-family of your type. Classes should be set directly on the table cell for compatibility with older clients. Any changes should following the default typography scale. | |
| */ | |
| .headline-one, .headline-two, .headline-three, .heading, .subheading, .body, .caption, .button, .table-heading { | |
| font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Edit */ | |
| font-style: normal; | |
| font-variant: normal; | |
| } | |
| .headline-one {font-size: 32px; font-weight: 500; line-height: 40px;} | |
| .headline-two {font-size: 24px; font-weight: 500; line-height: 32px;} | |
| .headline-three {font-size: 20px; font-weight: 500; line-height: 24px;} | |
| .heading {font-size: 16px; font-weight: 500; line-height: 24px;} | |
| .subheading {font-size: 12px; font-weight: 700; line-height: 16px; text-transform: uppercase;} | |
| .body {font-size: 14px; font-weight: 400; line-height: 20px;} | |
| .caption {font-size: 12px; font-weight: 400; line-height: 16px;} | |
| .table-heading {font-size: 10px; font-weight: 700; text-transform: uppercase;} | |
| /* | |
| Set the styles of your links. | |
| */ | |
| a {color: inherit; font-weight: normal; text-decoration: underline;} | |
| /* | |
| Set the colors of your text. | |
| */ | |
| .text-primary { | |
| color: #007bff; /* Edit */ | |
| } | |
| .text-secondary { | |
| color: #6c757d; /* Edit */ | |
| } | |
| .text-black { | |
| color: #000000; /* Edit */ | |
| } | |
| .text-dark-gray { | |
| color: #343a40; /* Edit */ | |
| } | |
| .text-gray { | |
| color: #6c757d; /* Edit */ | |
| } | |
| .text-light-gray { | |
| color: #f8f9fa; /* Edit */ | |
| } | |
| .text-white { | |
| color: #ffffff; /* Edit */ | |
| } | |
| .text-success { | |
| color: #28a745; /* Edit */ | |
| } | |
| .text-danger { | |
| color: #dc3545; /* Edit */ | |
| } | |
| .text-warning { | |
| color: #ffc107; /* Edit */ | |
| } | |
| .text-info { | |
| color: #17a2b8; /* Edit */ | |
| } | |
| /* | |
| Set the styles of your buttons. Each button requires a matching background. | |
| */ | |
| .button-bg { | |
| border-radius: 2px; /* Editable */ | |
| } | |
| .button-bg-primary { | |
| background-color: #007bff /* Editable */; | |
| } | |
| .button-bg-secondary { | |
| background-color: #6c757d; /* Editable */ | |
| } | |
| .button-bg-success { | |
| background-color: #28a745; /* Editable */ | |
| } | |
| .button-bg-danger { | |
| background-color: #dc3545; /* Editable */ | |
| } | |
| .button { | |
| border-radius: 2px; /* Editable */ | |
| color: #ffffff; /* Editable */ | |
| display: inline-block; | |
| font-size: 14px; | |
| font-weight: 700; | |
| padding: 10px 20px 10px; | |
| text-decoration: none; | |
| } | |
| .button-primary { | |
| border: 1px solid #007bff /* Editable */; | |
| } | |
| .button-secondary { | |
| border: 1px solid #6c757d; /* Editable */ | |
| } | |
| .button-success { | |
| border: 1px solid #28a745; /* Editable */ | |
| } | |
| .button-danger { | |
| border: 1px solid #dc3545; /* Editable */ | |
| } | |
| /* | |
| Set the styles of your backgrounds. | |
| */ | |
| .bg {padding-left: 24px; padding-right: 24px;} | |
| .bg-primary { | |
| background-color: #007bff; /* Edit */ | |
| } | |
| .bg-secondary { | |
| background-color: #6c757d; /* Edit */ | |
| } | |
| .bg-black { | |
| background-color: #000000; /* Edit */ | |
| } | |
| .bg-dark-gray { | |
| background-color: #343a40; /* Edit */ | |
| } | |
| .bg-gray { | |
| background-color: #6c757d; /* Edit */ | |
| } | |
| .bg-light-gray { | |
| background-color: #f8f9fa; /* Edit */ | |
| } | |
| .bg-white { | |
| background-color: #ffffff; /* Edit */ | |
| } | |
| .bg-success { | |
| background-color: #28a745; /* Edit */ | |
| } | |
| .bg-danger { | |
| background-color: #dc3545; /* Edit */ | |
| } | |
| .bg-warning { | |
| background-color: #ffc107; /* Edit */ | |
| } | |
| .bg-info { | |
| background-color: #17a2b8; /* Edit */ | |
| } | |
| /* | |
| Set the styles of your tabular information. This class should not be set on tables with a role of presentation. | |
| */ | |
| .table {min-width: 100%; width: 100%;} | |
| .table td { | |
| border-top: 1px solid #eaebec; /* Editable */ | |
| padding-bottom: 12px; | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| padding-top: 12px; | |
| vertical-align: top; | |
| } | |
| /* | |
| Set the styles of your utility classes. | |
| */ | |
| .address, .address a {color: inherit !important;} | |
| .border-solid { | |
| border-style: solid !important; | |
| border-width: 2px !important; /* Edit */ | |
| border-color: #eaebec !important; /* Edit */ | |
| } | |
| .divider { | |
| border-bottom: 0px; | |
| border-top: 1px solid #eaebec; /* Edit */ | |
| height: 1px; | |
| line-height: 1px; | |
| width: 100%; | |
| } | |
| .text-bold {font-weight: 700;} | |
| .text-italic {font-style: italic;} | |
| .text-uppercase {text-transform: uppercase;} | |
| .text-underline {text-decoration: underline;} | |
| @media only screen and (max-width: 599px) | |
| { | |
| /* === Client Styles === */ | |
| body, table, td, p, a, li, blockquote {-webkit-text-size-adjust: none !important;} | |
| body {min-width: 100% !important; width: 100% !important;} | |
| center {padding-left: 12px !important; padding-right: 12px !important;} | |
| /* === Page Structure === */ | |
| /* | |
| Adjust sizes and spacing on mobile. | |
| */ | |
| #email-container {max-width: 600px !important; width: 100% !important;} | |
| #header, #footer {padding-left: 24px !important; padding-right: 24px !important;} | |
| .panel-container {max-width: 600px !important; width: 100% !important;} | |
| .panel-body {padding-left: 24px !important; padding-right: 24px !important;} | |
| .column-responsive {display: block !important; padding-bottom: 24px !important; width:100% !important;} | |
| .column-responsive img {width: auto !important;} | |
| .column-responsive-last {padding-bottom: 0px !important;} | |
| .column-responsive-gutter {display: none !important;} | |
| /* === Page Styles === */ | |
| /* | |
| Adjust sizes and spacing on mobile. | |
| */ | |
| } | |
| </style> | |
| <!--[if gte mso 9]> | |
| <xml> | |
| <o:OfficeDocumentSettings> | |
| <o:AllowPNG/> | |
| <o:PixelsPerInch>96</o:PixelsPerInch> | |
| </o:OfficeDocumentSettings> | |
| </xml> | |
| <![endif]--> | |
| <!--[if mso]> | |
| <xml xmlns:w="urn:schemas-microsoft-com:office:word"> | |
| <w:WordDocument><w:AutoHyphenation/></w:WordDocument> | |
| </xml> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <center> | |
| <!-- Start Email Container --> | |
| <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" id="email-container"> | |
| <tbody> | |
| <!-- Start Preheader --> | |
| <tr> | |
| <td id="preheader"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </td> | |
| </tr> | |
| <!-- End Preheader --> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| <tr> | |
| <td valign="top" id="email-body"> | |
| <!-- Start Panel Container --> | |
| <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" class="panel-container"> | |
| <tbody> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| <!-- Start Header --> | |
| <tr> | |
| <td align="left" id="header"> | |
| <a href="https://www.example.com"> | |
| <img alt="Company" border="0" src="https://www.vouchful.com/images/email-kit/placeholder-logo.png" width="56"> | |
| </a> | |
| </td> | |
| </tr> | |
| <!-- End Header --> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| <tr> | |
| <td class="panel-body"> | |
| <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> | |
| <tbody> | |
| <!-- Start Text --> | |
| <tr> | |
| <td align="left" class="headline-two text-dark-gray"> | |
| Your download is ready | |
| </td> | |
| </tr> | |
| <!-- End Text --> | |
| <tr> | |
| <td class="spacer-sm"></td> | |
| </tr> | |
| <!-- Start Text --> | |
| <tr> | |
| <td align="left" class="body text-dark-gray"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam justo, dignissim nec libero at, scelerisque porta neque. | |
| </td> | |
| </tr> | |
| <!-- End Text --> | |
| <tr> | |
| <td class="spacer-md"></td> | |
| </tr> | |
| <!-- Start Button --> | |
| <tr> | |
| <td align="left"> | |
| <table border="0" cellspacing="0" cellpadding="0" role="presentation"> | |
| <tbody> | |
| <tr> | |
| <td align="left" class="button-bg button-bg-primary"> | |
| <a href="https://www.example.com" class="button button-primary">Download File</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- End Button --> | |
| <tr> | |
| <td class="spacer-md"></td> | |
| </tr> | |
| <!-- Start Background --> | |
| <tr> | |
| <td align="left" class="bg bg-light-gray"> | |
| <table border="0" cellspacing="0" cellpadding="0" role="presentation"> | |
| <tbody> | |
| <tr> | |
| <td class="spacer-md"></td> | |
| </tr> | |
| <!-- Start Text --> | |
| <tr> | |
| <td align="left" class="body text-dark-gray"> | |
| Quisque ut scelerisque turpis. | |
| <br> | |
| <a href="https://www.example.com/sedmalesuadavelerosutposuere" class="body text-primary">https://www.example.com/sedmalesuadavelerosutposuere</a> | |
| </td> | |
| </tr> | |
| <!-- End Text --> | |
| <tr> | |
| <td class="spacer-md"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- End Background --> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- End Panel Container --> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| <!-- Start Footer --> | |
| <tr> | |
| <td align="left" id="footer"> | |
| <table border="0" cellpadding="0" cellspacing="0" role="presentation"> | |
| <tbody> | |
| <tr> | |
| <td align="left"> | |
| <table border="0" cellpadding="0" cellspacing="0" role="presentation"> | |
| <tbody> | |
| <tr> | |
| <td valign="top" width="28"> | |
| <a href="https://www.example.com"> | |
| <img alt="Icon" border="0" src="https://www.vouchful.com/images/email-kit/placeholder-icon.png" width="28" /> | |
| </a> | |
| </td> | |
| <td width="16"></td> | |
| <td valign="top" width="28"> | |
| <a href="https://www.example.com"> | |
| <img alt="Icon" border="0" src="https://www.vouchful.com/images/email-kit/placeholder-icon.png" width="28" /> | |
| </a> | |
| </td> | |
| <td width="16"></td> | |
| <td valign="top" width="28"> | |
| <a href="https://www.example.com"> | |
| <img alt="Icon" border="0" src="https://www.vouchful.com/images/email-kit/placeholder-icon.png" width="28" /> | |
| </a> | |
| </td> | |
| <td width="16"></td> | |
| <td valign="top" width="28"> | |
| <a href="https://www.example.com"> | |
| <img alt="Icon" border="0" src="https://www.vouchful.com/images/email-kit/placeholder-icon.png" width="28" /> | |
| </a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="spacer-sm"></td> | |
| </tr> | |
| <tr> | |
| <td align="left" class="body text-secondary"> | |
| © Company, Inc. All Rights Reserved. | |
| <br /> | |
| <span class="address">101 King St, San Francisco, CA 94107</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="spacer-md"></td> | |
| </tr> | |
| <tr> | |
| <td align="left" class="body text-secondary"> | |
| You are being contacted because you signed up for Company. | |
| <br /> | |
| <a href="https://www.example.com" class="body text-primary">Unsubscribe</a> | <a href="https://www.example.com" class="body text-primary">Privacy Policy</a> | <a href="https://www.example.com" class="body text-primary">Support</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- End Footer --> | |
| <tr> | |
| <td class="spacer-lg"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- End Email Container --> | |
| </center> | |
| </body> | |
| </html> |
