Email template markup

Requires one of the following products or higher.

Marketing Hub -Professional

In this article, learn about how standard HubSpot email templates are coded. When building custom email templates, keep in mind that email clients only support certain HTML and CSS features. Because of this, coding email templates that render consistently across clients requires a fair amount of experience and patience.

Check out HubSpot's Knowledge Base to learn how to create template layouts in-app or how to save an existing email as a template.

Required email template variables

In order to send emails with HubSpot, your templates must include certain information. See the required email HubL variables. When working with coded templates, you will also want to use modules to ensure email content can be easily edited on a per-email basis.

hs-inline-css and data-hse-inline-css

One challenging aspect of coding email templates that render correctly, across all clients, is the lack of support for CSS in a <style> within the <head>.

To make coding email templates easier, HubSpot coded email templates support a special style tag that gives designers the ability to write CSS that will be compiled and converted into inline CSS and will be added to the targeted elements. Any code added to a style tag with the ID of hs-inline-css, will be added to the targeted tags.

For example, Microsoft Outlook will apply a default font-family to all text contained in <td> tags, unless you specify a font-family inline for that table column. The example below uses a hs-inline-css style tag to add a font-family to all the table columns in the template. Please note that any media queries should be included in a separate <style>, as they can not be made inline.

Note that the data-hse-inline-css attribute on a <style> tag in the Edit > Edit Head section of drag and drop templates is in place of hs-inline-css to achieve this same goal. In coded files, either method may be used (as long as there is only one style#hs-inline-css per template). You may have multiple style[data-hs-inline-css="true"] elements.

Input

Output

<!doctype html>
<html>
    <head>
   {# coded email templates ONLY: #}
        <style type="text/css" id="hs-inline-css">
            td {
                font-family: Arial, sans-serif;
            }
        </style>
    {# coded OR drag-and-drop email templates: #}
        <style type="text/css" data-hse-inline-css="true">
            table {
                font-family: 'Courier New', sans-serif;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
        </table>
    </body>
</html>

 
<!doctype html>
<html>
    <head>
   {# coded email templates ONLY: #}
        <style type="text/css" id="hs-inline-css">
            td {
                font-family: Arial, sans-serif;
            }
        </style>
    {# coded OR drag-and-drop email templates: #}
        <style type="text/css" data-hse-inline-css="true">
            table {
                font-family: 'Courier New', sans-serif;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
        </table>
    </body>
</html>

Responsive email template

HubSpot's default email template layout uses the markup below. These responsive layouts include media queries that make the images and tables responsive. The responsive layouts use color and font variables that connect to Settings > Marketing > Email.

When working with HubSpot's responsive layout, any <td> with a class that includes the text "column" will be made responsive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta name="twitter:title" content="{% if content.html_title and content.html_title != ""%}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %}
         <style type="text/css" id="hs-inline-css">
        /*<![CDATA[*/
            /* everything in this node will be inlined */

            /* ==== Page Styles ==== */

            body, #backgroundTable {
                background-color: {{ background_color }}; /* Use body to determine background color */
                font-family: {{ primary_font }};
            }

            #templateTable {
                width: {{ email_body_width }}px;
                background-color: {{ body_color }};
                -webkit-font-smoothing: antialiased;
            }

            h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
                color:{{ primary_font_color }};
                display:block;
                font-family: {{ primary_font }};
                font-weight:bold;
                line-height:100%;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                text-align:left;
            }

            h1, .h1 {
                font-size:26px;
            }

            h2, .h2 {
                font-size:20px;
            }

            h3, .h3 {
                font-size:15px;
            }

            h4, .h4 {
                font-size:13px;
            }

            h5, .h5 {
                font-size:11px;
            }

            h6, .h6 {
                font-size:10px;
            }

            /* ==== Header Styles ==== */

            #headerTable {
                background-color: {{ background_color }};
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size:10px;
                line-height:120%;
                text-align:right;
                border-collapse: separate !important;
                padding-right: {{email_body_padding}}px;
            }

            #headerTable a:link, #headerTable a:visited, /* Yahoo! Mail Override */ #headerTable a .yshortcuts /* Yahoo! Mail Override */{
                font-weight:normal;
                text-decoration:underline;
            }

            /* ==== Template Wrapper Styles ==== */

            #contentCell {
                padding: 10px 20px;
                background-color: {{ background_color }};
            }

            #contentTableOuter {
                border-collapse: separate !important;

                background-color: {{ body_color }};
                {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != "" %}
                box-shadow: {{ email_main_body_box_shadow_css }};
                {% endif %}

                padding: {{email_body_padding}}px;
            }

            #contentTableInner {
                width: {{email_body_width}}px;
            }

            /* ==== Body Styles ==== */

            .bodyContent {
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size: {{primary_font_size }};
                line-height:150%;
                text-align:left;
            }

            /* ==== Column Styles ==== */

            table.columnContentTable {
                border-collapse:separate !important;
                border-spacing:0;

                background-color: {{ body_color }};
            }

            td[class~="columnContent"] {
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size:{{primary_font_size }};
                line-height:120%;
                padding-top:20px;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
            }

            /* ==== Footer Styles ==== */

            #footerTable {
                background-color: {{ background_color }};
            }

            #footerTable a {
                color: {{ secondary_font_color }};
            }

            #footerTable {
                color:{{ secondary_font_color }};
                font-family:{{ primary_font }};
                font-size:12px;
                line-height:120%;
                padding-top:20px;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
                text-align:center;
            }

            #footerTable a:link, #footerTable a:visited, /* Yahoo! Mail Override */ #footerTable a .yshortcuts /* Yahoo! Mail Override */{
                font-weight:normal;
                text-decoration:underline;
            }

            .hs-image-social-sharing-24 {
                max-width: 24px;
                max-height: 24px;
            }

            /* ==== Standard Resets ==== */
            .ExternalClass{
                width:100%;
            } /* Force Hotmail to display emails at full width */
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            } /* Force Hotmail to display normal line spacing */
            body, table, td, p, a, li, blockquote{
                -webkit-text-size-adjust:100%;
                -ms-text-size-adjust:100%;
            } /* Prevent WebKit and Windows mobile changing default text sizes */
            table, td {
                mso-table-lspace:0pt;
                mso-table-rspace:0pt;
            } /* Remove spacing between tables in Outlook 2007 and up */
            img {
                vertical-align: bottom;
                -ms-interpolation-mode:bicubic;
            } /* Allow smoother rendering of resized image in Internet Explorer */

            /* Reset Styles */
            body {
                margin:0;
                padding:0;
            }
            table {
                border-collapse:collapse !important;
            }
            body, #backgroundTable, #bodyCell{
                height:100% !important;
                margin:0;
                padding:0;
                width:100% !important;
            }
            a:link, a:visited {
                border-bottom: none;
            }

            /* iOS automatically adds a link to addresses */
            /* Style the footer with the same color as the footer text */
            #footer a {
                color: {{ secondary_font_color }};;
                -webkit-text-size-adjust: none;
                text-decoration: underline;
                font-weight: normal
            }

            /* Hide preview text on rendering */
            #preview_text {
                display: none;
            }
        /*]]>*/
    </style>
         <style type="text/css">
        /*<![CDATA[*/
            /* ==== Mobile Styles ==== */

            /* Constrain email width for small screens */
            @media screen and (max-width: 650px) {
                table[id="backgroundTable"] {
                    width: 95% !important;
                }

                table[id="templateTable"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }

                table[id="contentTableInner"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }

                /* Makes image expand to take 100% of width*/
                img {
                    width: 100% !important;
                    height: auto !important;
                }

                #contentCell {
                    padding: 10px 10px !important;
                }

                #headerTable {
                    padding-right: {{email_body_padding_num / 2 |int}}px !important;
                }

                #contentTableOuter {
                    padding: {{email_body_padding_num / 2 |int}}px !important;
                }
            }

            @media only screen and (max-width: 480px) {
                /* ==== Client-Specific Mobile Styles ==== */
                body, table, td, p, a, li, blockquote{
                    -webkit-text-size-adjust:none !important;
                } /* Prevent Webkit platforms from changing default text sizes */
                body{
                    width:100% !important;
                    min-width:100% !important;
                } /* Prevent iOS Mail from adding padding to the body */

                /* ==== Mobile Reset Styles ==== */
                td[id="bodyCell"] {
                    padding:10px !important;
                }

                /* ==== Mobile Template Styles ==== */

                table[id="templateTable"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }

                table[id="contentTableInner"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }

                /* ==== Image Alignment Styles ==== */

                h1, .h1 {
                    font-size:26px !important;
                    line-height:125% !important;
                }

                h2, .h2 {
                    font-size:20px !important;
                    line-height:125% !important;
                }

                h3, .h3 {
                    font-size:15px !important;
                    line-height:125% !important;
                }

                h4, .h4 {
                    font-size:13px !important;
                    line-height:125% !important;
                }

                h5, .h5 {
                    font-size:11px !important;
                    line-height:125% !important;
                }

                h6, .h6 {
                    font-size:10px !important;
                    line-height:125% !important;
                }

                .hide {
                    display:none !important;
                } /* Hide to save space */

                /* ==== Body Styles ==== */

                td[class="bodyContent"] {
                    font-size:16px !important;
                    line-height:145% !important;
                }

                /* ==== Footer Styles ==== */

                td[id="footerTable"]{
                    padding-left: 0px !important;
                    padding-right: 0px !important;
                    font-size:12px !important;
                    line-height:145% !important;
                }

                /* ==== Image Alignment Styles ==== */

                table[class="alignImageTable"] {
                    width: 100% !important;
                }

                td[class="imageTableTop"] {
                    display: none !important;
                    /*padding-top: 10px !important;*/
                }
                td[class="imageTableRight"] {
                    display: none !important;
                }
                td[class="imageTableBottom"] {
                    padding-bottom: 10px !important;
                }
                td[class="imageTableLeft"] {
                    display: none !important;
                }

                /* ==== Column Styles ==== */

                td[class~="column"] {
                    display: block !important;
                    width: 100% !important;
                    padding-top: 0 !important;
                    padding-right: 0 !important;
                    padding-bottom: 0 !important;
                    padding-left: 0 !important;
                }

                td[class~=columnContent] {
                    font-size:14px !important;
                    line-height:145% !important;

                    padding-top: 10px !important;
                    padding-right: 10px !important;
                    padding-bottom: 10px !important;
                    padding-left: 10px !important;
                }

                #contentCell {
                    padding: 10px 0px !important;
                }

                #headerTable {
                    padding-right: {{email_body_padding_num / 2 |int}}px !important;
                }

                #contentTableOuter {
                    padding: {{email_body_padding_num / 2 |int}}px !important;
                }
            }

            #preview_text {
                display: none;
            }
        /*]]>*/
    </style>
        <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
        <!--                                                                                                                     -->
        <!--                                                                                                                     -->
        <!--                            _/    _/            _/          _/_/_/                        _/                         -->
        <!--                           _/    _/  _/    _/  _/_/_/    _/        _/_/_/      _/_/    _/_/_/_/                      -->
        <!--                          _/_/_/_/  _/    _/  _/    _/    _/_/    _/    _/  _/    _/    _/                           -->
        <!--                         _/    _/  _/    _/  _/    _/        _/  _/    _/  _/    _/    _/                            -->
        <!--                        _/    _/    _/_/_/  _/_/_/    _/_/_/    _/_/_/      _/_/        _/_/                         -->
        <!--                                                               _/                                                    -->
        <!--                                                              _/                                                     -->
        <!--                                                                                                                     -->
        <!--                                                 Extra White Space!                                                  -->
        <!--                                                                                                                     -->
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    </head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
        <!-- Preview text (text which appears right after subject) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>

        <!--  The  backgroundTable table manages the color of the background and then the templateTable maintains the body of
        the email template, including preheader & footer. This is the only table you set the width of to, everything else is set to
        100% and in the CSS above. Having the width here within the table is just a small win for Lotus Notes. -->

        <!-- Begin backgroundTable -->
        <table align="center" bgcolor="{{ background_color }}" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
            <tr>
                <td align="center" valign="top" id="bodyCell"> <!-- When nesting tables within a TD, align center keeps it well, centered. -->
                    <!-- Begin Template Container -->
                    <!-- This holds everything together in a nice container -->
                    <table border="0" cellpadding="0" cellspacing="0" id="templateTable">
                        <tr>
                            <td align="center" valign="top">
                                <!-- Begin Template Preheader -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
                                    <div class="header-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page">
{% if content.create_page %}
                                <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}">
    Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
</div>
{% endif %}

                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end header wrapper -->
                                </table>
                                <!-- End Template Preheader -->
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" id="contentCell">
                                <!-- Begin Template Wrapper -->
                                <!-- This separates the preheader which usually contains the "open in browser, etc" content
                                from the actual body of the email. Can alternatively contain the footer too, but I choose not
                                to so that it stays outside of the border. -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="contentTableOuter" style="{{email_body_border_css}}">
                                    <tr>
                                        <td align="center" valign="top">
                                            <table border="0" cellpadding="0" cellspacing="0" id="contentTableInner">
                                                <div class="body-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-logo " style="" data-widget-type="logo">
                                <div class="layout-widget-wrapper">
                                {% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body">

{% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p>
<p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p>
<p>Use a list to:</p>
<ul>
<li>Explain the value of your offer</li>
<li>Remind the reader what they’ll get out of taking action</li>
<li>Show off your skill with bullet points</li>
<li>Make your content easy to scan</li>
</ul>
<p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p>
<p>Now wrap it all up with a pithy little reminder of how much you love them.</p>
<p>Aw. You silver-tongued devil, you.</p>
<p>Sincerely,</p>
<p>Your name</p>{% end_content_attribute %}


                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text">
                                <div class="layout-widget-wrapper">
                                {% text "social_sharing_label" label='Social Sharing Label' %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing">
                                <div class="layout-widget-wrapper">
                                {% widget_block social_sharing "Social Sharing" label="Social Sharing", use_page_url=False  %}
                                {% end_widget_block %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end body wrapper -->
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <!-- End Template Wrapper -->
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">
                                <!-- Begin Template Footer -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable">
                                    <div class="footer-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam">
                                <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block">
{{ site_settings.company_name }}
  {{ site_settings.company_street_address_1 }}
 {{ site_settings.company_street_address_2 }}
 {{ site_settings.company_city }},
 {{ site_settings.company_state }}
  {{ site_settings.company_zip }}
  {{ site_settings.company_country }}
<br/><br/>
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
<br/><br/>
Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive.
<br/><br/>
 <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a>
</p>

                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end footer wrapper -->
                                    <tr>
                                        {% hubspot_footer %}
                                    </tr>
                                </table>
                                <!-- End Template Footer -->
                            </td>
                        </tr>
                    </table>
                    <!-- End Template Container -->
                </td>
            </tr>
        </table>
    </body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta name="twitter:title" content="{% if content.html_title and content.html_title != ""%}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %}
         <style type="text/css" id="hs-inline-css">
        /*<![CDATA[*/
            /* everything in this node will be inlined */
​
            /* ==== Page Styles ==== */
​
            body, #backgroundTable {
                background-color: {{ background_color }}; /* Use body to determine background color */
                font-family: {{ primary_font }};
            }
​
            #templateTable {
                width: {{ email_body_width }}px;
                background-color: {{ body_color }};
                -webkit-font-smoothing: antialiased;
            }
​
            h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
                color:{{ primary_font_color }};
                display:block;
                font-family: {{ primary_font }};
                font-weight:bold;
                line-height:100%;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                text-align:left;
            }
​
            h1, .h1 {
                font-size:26px;
            }
​
            h2, .h2 {
                font-size:20px;
            }
​
            h3, .h3 {
                font-size:15px;
            }
​
            h4, .h4 {
                font-size:13px;
            }
​
            h5, .h5 {
                font-size:11px;
            }
​
            h6, .h6 {
                font-size:10px;
            }
​
            /* ==== Header Styles ==== */
​
            #headerTable {
                background-color: {{ background_color }};
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size:10px;
                line-height:120%;
                text-align:right;
                border-collapse: separate !important;
                padding-right: {{email_body_padding}}px;
            }
​
            #headerTable a:link, #headerTable a:visited, /* Yahoo! Mail Override */ #headerTable a .yshortcuts /* Yahoo! Mail Override */{
                font-weight:normal;
                text-decoration:underline;
            }
​
            /* ==== Template Wrapper Styles ==== */
​
            #contentCell {
                padding: 10px 20px;
                background-color: {{ background_color }};
            }
​
            #contentTableOuter {
                border-collapse: separate !important;
​
                background-color: {{ body_color }};
                {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != "" %}
                box-shadow: {{ email_main_body_box_shadow_css }};
                {% endif %}
​
                padding: {{email_body_padding}}px;
            }
​
            #contentTableInner {
                width: {{email_body_width}}px;
            }
​
            /* ==== Body Styles ==== */
​
            .bodyContent {
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size: {{primary_font_size }};
                line-height:150%;
                text-align:left;
            }
​
            /* ==== Column Styles ==== */
​
            table.columnContentTable {
                border-collapse:separate !important;
                border-spacing:0;
​
                background-color: {{ body_color }};
            }
​
            td[class~="columnContent"] {
                color:{{ primary_font_color }};
                font-family:{{ primary_font }};
                font-size:{{primary_font_size }};
                line-height:120%;
                padding-top:20px;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
            }
​
            /* ==== Footer Styles ==== */
​
            #footerTable {
                background-color: {{ background_color }};
            }
​
            #footerTable a {
                color: {{ secondary_font_color }};
            }
​
            #footerTable {
                color:{{ secondary_font_color }};
                font-family:{{ primary_font }};
                font-size:12px;
                line-height:120%;
                padding-top:20px;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
                text-align:center;
            }
​
            #footerTable a:link, #footerTable a:visited, /* Yahoo! Mail Override */ #footerTable a .yshortcuts /* Yahoo! Mail Override */{
                font-weight:normal;
                text-decoration:underline;
            }
​
            .hs-image-social-sharing-24 {
                max-width: 24px;
                max-height: 24px;
            }
​
            /* ==== Standard Resets ==== */
            .ExternalClass{
                width:100%;
            } /* Force Hotmail to display emails at full width */
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            } /* Force Hotmail to display normal line spacing */
            body, table, td, p, a, li, blockquote{
                -webkit-text-size-adjust:100%;
                -ms-text-size-adjust:100%;
            } /* Prevent WebKit and Windows mobile changing default text sizes */
            table, td {
                mso-table-lspace:0pt;
                mso-table-rspace:0pt;
            } /* Remove spacing between tables in Outlook 2007 and up */
            img {
                vertical-align: bottom;
                -ms-interpolation-mode:bicubic;
            } /* Allow smoother rendering of resized image in Internet Explorer */
​
            /* Reset Styles */
            body {
                margin:0;
                padding:0;
            }
            table {
                border-collapse:collapse !important;
            }
            body, #backgroundTable, #bodyCell{
                height:100% !important;
                margin:0;
                padding:0;
                width:100% !important;
            }
            a:link, a:visited {
                border-bottom: none;
            }
​
            /* iOS automatically adds a link to addresses */
            /* Style the footer with the same color as the footer text */
            #footer a {
                color: {{ secondary_font_color }};;
                -webkit-text-size-adjust: none;
                text-decoration: underline;
                font-weight: normal
            }
​
            /* Hide preview text on rendering */
            #preview_text {
                display: none;
            }
        /*]]>*/
    </style>
         <style type="text/css">
        /*<![CDATA[*/
            /* ==== Mobile Styles ==== */
​
            /* Constrain email width for small screens */
            @media screen and (max-width: 650px) {
                table[id="backgroundTable"] {
                    width: 95% !important;
                }
​
                table[id="templateTable"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }
​
                table[id="contentTableInner"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }
​
                /* Makes image expand to take 100% of width*/
                img {
                    width: 100% !important;
                    height: auto !important;
                }
​
                #contentCell {
                    padding: 10px 10px !important;
                }
​
                #headerTable {
                    padding-right: {{email_body_padding_num / 2 |int}}px !important;
                }
​
                #contentTableOuter {
                    padding: {{email_body_padding_num / 2 |int}}px !important;
                }
            }
​
            @media only screen and (max-width: 480px) {
                /* ==== Client-Specific Mobile Styles ==== */
                body, table, td, p, a, li, blockquote{
                    -webkit-text-size-adjust:none !important;
                } /* Prevent Webkit platforms from changing default text sizes */
                body{
                    width:100% !important;
                    min-width:100% !important;
                } /* Prevent iOS Mail from adding padding to the body */
​
                /* ==== Mobile Reset Styles ==== */
                td[id="bodyCell"] {
                    padding:10px !important;
                }
​
                /* ==== Mobile Template Styles ==== */
​
                table[id="templateTable"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }
​
                table[id="contentTableInner"] {
                    max-width:{{ email_body_width }}px !important;
                    width:100% !important;
                }
​
                /* ==== Image Alignment Styles ==== */
​
                h1, .h1 {
                    font-size:26px !important;
                    line-height:125% !important;
                }
​
                h2, .h2 {
                    font-size:20px !important;
                    line-height:125% !important;
                }
​
                h3, .h3 {
                    font-size:15px !important;
                    line-height:125% !important;
                }
​
                h4, .h4 {
                    font-size:13px !important;
                    line-height:125% !important;
                }
​
                h5, .h5 {
                    font-size:11px !important;
                    line-height:125% !important;
                }
​
                h6, .h6 {
                    font-size:10px !important;
                    line-height:125% !important;
                }
​
                .hide {
                    display:none !important;
                } /* Hide to save space */
​
                /* ==== Body Styles ==== */
​
                td[class="bodyContent"] {
                    font-size:16px !important;
                    line-height:145% !important;
                }
​
                /* ==== Footer Styles ==== */
​
                td[id="footerTable"]{
                    padding-left: 0px !important;
                    padding-right: 0px !important;
                    font-size:12px !important;
                    line-height:145% !important;
                }
​
                /* ==== Image Alignment Styles ==== */
​
                table[class="alignImageTable"] {
                    width: 100% !important;
                }
​
                td[class="imageTableTop"] {
                    display: none !important;
                    /*padding-top: 10px !important;*/
                }
                td[class="imageTableRight"] {
                    display: none !important;
                }
                td[class="imageTableBottom"] {
                    padding-bottom: 10px !important;
                }
                td[class="imageTableLeft"] {
                    display: none !important;
                }
​
                /* ==== Column Styles ==== */
​
                td[class~="column"] {
                    display: block !important;
                    width: 100% !important;
                    padding-top: 0 !important;
                    padding-right: 0 !important;
                    padding-bottom: 0 !important;
                    padding-left: 0 !important;
                }
​
                td[class~=columnContent] {
                    font-size:14px !important;
                    line-height:145% !important;
​
                    padding-top: 10px !important;
                    padding-right: 10px !important;
                    padding-bottom: 10px !important;
                    padding-left: 10px !important;
                }
​
                #contentCell {
                    padding: 10px 0px !important;
                }
​
                #headerTable {
                    padding-right: {{email_body_padding_num / 2 |int}}px !important;
                }
​
                #contentTableOuter {
                    padding: {{email_body_padding_num / 2 |int}}px !important;
                }
            }
​
            #preview_text {
                display: none;
            }
        /*]]>*/
    </style>
        <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
        <!--                                                                                                                     -->
        <!--                                                                                                                     -->
        <!--                            _/    _/            _/          _/_/_/                        _/                         -->
        <!--                           _/    _/  _/    _/  _/_/_/    _/        _/_/_/      _/_/    _/_/_/_/                      -->
        <!--                          _/_/_/_/  _/    _/  _/    _/    _/_/    _/    _/  _/    _/    _/                           -->
        <!--                         _/    _/  _/    _/  _/    _/        _/  _/    _/  _/    _/    _/                            -->
        <!--                        _/    _/    _/_/_/  _/_/_/    _/_/_/    _/_/_/      _/_/        _/_/                         -->
        <!--                                                               _/                                                    -->
        <!--                                                              _/                                                     -->
        <!--                                                                                                                     -->
        <!--                                                 Extra White Space!                                                  -->
        <!--                                                                                                                     -->
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    </head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
        <!-- Preview text (text which appears right after subject) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>
​
        <!--  The  backgroundTable table manages the color of the background and then the templateTable maintains the body of
        the email template, including preheader & footer. This is the only table you set the width of to, everything else is set to
        100% and in the CSS above. Having the width here within the table is just a small win for Lotus Notes. -->
​
        <!-- Begin backgroundTable -->
        <table align="center" bgcolor="{{ background_color }}" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
            <tr>
                <td align="center" valign="top" id="bodyCell"> <!-- When nesting tables within a TD, align center keeps it well, centered. -->
                    <!-- Begin Template Container -->
                    <!-- This holds everything together in a nice container -->
                    <table border="0" cellpadding="0" cellspacing="0" id="templateTable">
                        <tr>
                            <td align="center" valign="top">
                                <!-- Begin Template Preheader -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
                                    <div class="header-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page">
{% if content.create_page %}
                                <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}">
    Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
</div>
{% endif %}
​
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end header wrapper -->
                                </table>
                                <!-- End Template Preheader -->
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" id="contentCell">
                                <!-- Begin Template Wrapper -->
                                <!-- This separates the preheader which usually contains the "open in browser, etc" content
                                from the actual body of the email. Can alternatively contain the footer too, but I choose not
                                to so that it stays outside of the border. -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="contentTableOuter" style="{{email_body_border_css}}">
                                    <tr>
                                        <td align="center" valign="top">
                                            <table border="0" cellpadding="0" cellspacing="0" id="contentTableInner">
                                                <div class="body-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-logo " style="" data-widget-type="logo">
                                <div class="layout-widget-wrapper">
                                {% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body">
​
{% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p>
<p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p>
<p>Use a list to:</p>
<ul>
<li>Explain the value of your offer</li>
<li>Remind the reader what they’ll get out of taking action</li>
<li>Show off your skill with bullet points</li>
<li>Make your content easy to scan</li>
</ul>
<p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p>
<p>Now wrap it all up with a pithy little reminder of how much you love them.</p>
<p>Aw. You silver-tongued devil, you.</p>
<p>Sincerely,</p>
<p>Your name</p>{% end_content_attribute %}
​
​
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text">
                                <div class="layout-widget-wrapper">
                                {% text "social_sharing_label" label='Social Sharing Label' %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing">
                                <div class="layout-widget-wrapper">
                                {% widget_block social_sharing "Social Sharing" label="Social Sharing", use_page_url=False  %}
                                {% end_widget_block %}
                                </div><!--end layout-widget-wrapper -->
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end body wrapper -->
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <!-- End Template Wrapper -->
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">
                                <!-- Begin Template Footer -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable">
                                    <div class="footer-container-wrapper">
        <tr>
            <td align="center" valign="top" class="bodyContent" width="100%" colspan="12">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                    <tr>
                        <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                            <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam">
                                <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block">
{{ site_settings.company_name }}
  {{ site_settings.company_street_address_1 }}
 {{ site_settings.company_street_address_2 }}
 {{ site_settings.company_city }},
 {{ site_settings.company_state }}
  {{ site_settings.company_zip }}
  {{ site_settings.company_country }}
<br/><br/>
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
<br/><br/>
Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive.
<br/><br/>
 <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a>
</p>
​
                            </div><!--end widget-span -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</div><!--end footer wrapper -->
                                    <tr>
                                        {% hubspot_footer %}
                                    </tr>
                                </table>
                                <!-- End Template Footer -->
                            </td>
                        </tr>
                    </table>
                    <!-- End Template Container -->
                </td>
            </tr>
        </table>
    </body>
</html>

Basic email template

Basic HubSpot template layouts use different markup and do not include the media queries that make the email responsive. The basic layouts also use color and font variables that connect to Settings > Marketing > Email.

<!DOCTYPE html>
<html bgcolor="{{ background_color }}" style="margin: 0; padding: 0; background-color: {{ background_color }}">
    <head>
        <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta name="twitter:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}" />{% endif %}
        <style type="text/css">
        /*<![CDATA[*/
            /* iOS automatically adds a link to addresses */
            /* Style the footer with the same color as the footer text */
            #footer a {
                color: {{ secondary_font_color }};
                -webkit-text-size-adjust: none;
                text-decoration: underline;
                font-weight: normal
            }

            {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != '' %}
            #main_body {
                box-shadow: {{ email_main_body_box_shadow_css }};
            }
            {% endif %}

            /* Hide preview text on rendering */
            #preview_text {
                display: none;
            }

        /*]]>*/
        </style>
        <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
        <!--                                                                                                                     -->
        <!--                                                                                                                     -->
        <!--                            _/    _/            _/          _/_/_/                        _/                         -->
        <!--                           _/    _/  _/    _/  _/_/_/    _/        _/_/_/      _/_/    _/_/_/_/                      -->
        <!--                          _/_/_/_/  _/    _/  _/    _/    _/_/    _/    _/  _/    _/    _/                           -->
        <!--                         _/    _/  _/    _/  _/    _/        _/  _/    _/  _/    _/    _/                            -->
        <!--                        _/    _/    _/_/_/  _/_/_/    _/_/_/    _/_/_/      _/_/        _/_/                         -->
        <!--                                                               _/                                                    -->
        <!--                                                              _/                                                     -->
        <!--                                                                                                                     -->
        <!--                                                 Extra White Space!                                                  -->
        <!--                                                                                                                     -->
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    </head>
    <body bgcolor="{{ background_color }}" style="margin: 0; padding: 0;  background-color: {{ background_color }}" marginheight="0" marginwidth="0" topmargin="0">

        <!-- Preview text (text which appears right after subject) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>

        <!-- start container -->
        <table bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none" cellpadding="0" cellspacing="0" border="0" width="100%">
             <tr>
                <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }};">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}">
                                    <!-- start header section -->
                                    <div class="header-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>

        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page">
{% if content.create_page %}
                    <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}">
    Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
</div>
{% endif %}

                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end header wrapper -->
                                    <!-- end header section -->
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td bgcolor="{{ background_color }}" style="padding: 10px 20px; background-color: {{ background_color }}">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td id="main_body" width="{{ email_body_width }}" bgcolor="{{ body_color }}" style="padding: {{ email_body_padding }}px; background-color: {{ body_color }}; {{ email_body_border_css }}; border-radius: 4px">
                                    <div align="center">
                                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                                            <!-- start content -->
                                            <tr>
                                                <td style="padding: 0; background-color: {{ body_color }}">
                                                    <div align="center">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}">
                                                            <tr>
                                                                <td>
                                                                    <div align="center">
                                                                        <!-- start body section -->
                                                                        <div class="body-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>

        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-logo " style="" data-widget-type="logo">
                    <div class="layout-widget-wrapper">
                        {% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body">

{% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p>
<p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p>
<p>Use a list to:</p>
<ul>
<li>Explain the value of your offer</li>
<li>Remind the reader what they’ll get out of taking action</li>
<li>Show off your skill with bullet points</li>
<li>Make your content easy to scan</li>
</ul>
<p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p>
<p>Now wrap it all up with a pithy little reminder of how much you love them.</p>
<p>Aw. You silver-tongued devil, you.</p>
<p>Sincerely,</p>
<p>Your name</p>{% end_content_attribute %}


                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text">
                    <div class="layout-widget-wrapper">
                        {% text "social_sharing_label" overrideable=True, label="Social Sharing Label" %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing">
                    <div class="layout-widget-wrapper">
                        {% widget_block social_sharing "Social Sharing" label='Social Sharing', overrideable=True, use_page_url=False  %}
                        {% end_widget_block %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end body wrapper -->
                                                                        <!-- end body section -->
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                            <!-- end content -->
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; padding: 13px {{ email_body_padding }}px">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}">
                                    <!-- start footer section -->
                                    <div class="footer-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>

        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam">
                    <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block">
{{ site_settings.company_name }}
  {{ site_settings.company_street_address_1 }}
 {{ site_settings.company_street_address_2 }}
 {{ site_settings.company_city }},
 {{ site_settings.company_state }}
  {{ site_settings.company_zip }}
  {{ site_settings.company_country }}
<br/><br/>
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
<br/><br/>
Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive.
<br/><br/>
 <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a>
</p>

                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end footer wrapper -->
                                    <!-- end footer section -->
                                </td>
                            </tr>
                            <tr>
                                {% hubspot_footer %}
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
        <!-- end container -->
    </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html bgcolor="{{ background_color }}" style="margin: 0; padding: 0; background-color: {{ background_color }}">
    <head>
        <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        <meta name="twitter:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}">
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}" />{% endif %}
        <style type="text/css">
        /*<![CDATA[*/
            /* iOS automatically adds a link to addresses */
            /* Style the footer with the same color as the footer text */
            #footer a {
                color: {{ secondary_font_color }};
                -webkit-text-size-adjust: none;
                text-decoration: underline;
                font-weight: normal
            }
​
            {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != '' %}
            #main_body {
                box-shadow: {{ email_main_body_box_shadow_css }};
            }
            {% endif %}
​
            /* Hide preview text on rendering */
            #preview_text {
                display: none;
            }
​
        /*]]>*/
        </style>
        <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
        <!--                                                                                                                     -->
        <!--                                                                                                                     -->
        <!--                            _/    _/            _/          _/_/_/                        _/                         -->
        <!--                           _/    _/  _/    _/  _/_/_/    _/        _/_/_/      _/_/    _/_/_/_/                      -->
        <!--                          _/_/_/_/  _/    _/  _/    _/    _/_/    _/    _/  _/    _/    _/                           -->
        <!--                         _/    _/  _/    _/  _/    _/        _/  _/    _/  _/    _/    _/                            -->
        <!--                        _/    _/    _/_/_/  _/_/_/    _/_/_/    _/_/_/      _/_/        _/_/                         -->
        <!--                                                               _/                                                    -->
        <!--                                                              _/                                                     -->
        <!--                                                                                                                     -->
        <!--                                                 Extra White Space!                                                  -->
        <!--                                                                                                                     -->
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    </head>
    <body bgcolor="{{ background_color }}" style="margin: 0; padding: 0;  background-color: {{ background_color }}" marginheight="0" marginwidth="0" topmargin="0">
​
        <!-- Preview text (text which appears right after subject) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>
​
        <!-- start container -->
        <table bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none" cellpadding="0" cellspacing="0" border="0" width="100%">
             <tr>
                <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }};">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}">
                                    <!-- start header section -->
                                    <div class="header-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>
​
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page">
{% if content.create_page %}
                    <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}">
    Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
</div>
{% endif %}
​
                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end header wrapper -->
                                    <!-- end header section -->
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td bgcolor="{{ background_color }}" style="padding: 10px 20px; background-color: {{ background_color }}">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td id="main_body" width="{{ email_body_width }}" bgcolor="{{ body_color }}" style="padding: {{ email_body_padding }}px; background-color: {{ body_color }}; {{ email_body_border_css }}; border-radius: 4px">
                                    <div align="center">
                                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                                            <!-- start content -->
                                            <tr>
                                                <td style="padding: 0; background-color: {{ body_color }}">
                                                    <div align="center">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}">
                                                            <tr>
                                                                <td>
                                                                    <div align="center">
                                                                        <!-- start body section -->
                                                                        <div class="body-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>
​
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-logo " style="" data-widget-type="logo">
                    <div class="layout-widget-wrapper">
                        {% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body">
​
{% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p>
<p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p>
<p>Use a list to:</p>
<ul>
<li>Explain the value of your offer</li>
<li>Remind the reader what they’ll get out of taking action</li>
<li>Show off your skill with bullet points</li>
<li>Make your content easy to scan</li>
</ul>
<p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p>
<p>Now wrap it all up with a pithy little reminder of how much you love them.</p>
<p>Aw. You silver-tongued devil, you.</p>
<p>Sincerely,</p>
<p>Your name</p>{% end_content_attribute %}
​
​
                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text">
                    <div class="layout-widget-wrapper">
                        {% text "social_sharing_label" overrideable=True, label="Social Sharing Label" %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing">
                    <div class="layout-widget-wrapper">
                        {% widget_block social_sharing "Social Sharing" label='Social Sharing', overrideable=True, use_page_url=False  %}
                        {% end_widget_block %}
                    </div><!--end layout-widget-wrapper -->
                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end body wrapper -->
                                                                        <!-- end body section -->
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                            <!-- end content -->
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; padding: 13px {{ email_body_padding }}px">
                    <div align="center">
                        <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0">
                            <tr>
                                <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}">
                                    <!-- start footer section -->
                                    <div class="footer-container-wrapper">
    <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}">
<tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr>
​
        <tr>
            <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; ">
                <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam">
                    <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block">
{{ site_settings.company_name }}
  {{ site_settings.company_street_address_1 }}
 {{ site_settings.company_street_address_2 }}
 {{ site_settings.company_city }},
 {{ site_settings.company_state }}
  {{ site_settings.company_zip }}
  {{ site_settings.company_country }}
<br/><br/>
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
<br/><br/>
Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive.
<br/><br/>
 <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a>
</p>
​
                </div><!--end widget-span -->
            </td>
        </tr>
    </table>
</div><!--end footer wrapper -->
                                    <!-- end footer section -->
                                </td>
                            </tr>
                            <tr>
                                {% hubspot_footer %}
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
        <!-- end container -->
    </body>
</html>

Starting from scratch

When you start from scratch by creating a .html email in Design Manager, HubSpot will automatically generate the markup below.

<!doctype html>
<html>
    <head>
        <title>{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %}
        <style type="text/css" id="hs-inline-css">
            /*<![CDATA[*/
            /* everything in this style tag will be inlined onto matching elements */
            .sample-rule {
            }
            /*]]>*/
        </style>
    </head>
    <body>
        <!-- Preview text (text which appears right after subject in certain email clients) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>
        <!-- View as webpage link -->
        {% if content.create_page %}
            <div>
                Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
            </div>
        {% endif %}
        <!-- Insert body here -->
        <!-- Office location information and unsubscribe links -->
        <p id="footer">
            {{ site_settings.company_name }}
            {{ site_settings.company_street_address_1 }}
            {{ site_settings.company_street_address_2 }}
            {{ site_settings.company_city }}
            {{ site_settings.company_state }}
            {{ site_settings.company_zip }}
            {{ site_settings.company_country }}
            <br/>
            You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
            <br/>
            Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}">email preferences</a> to choose the types of emails you receive.
            <br/>
            <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}">Unsubscribe from all future emails</a>
        </p>
    </body>
</html>

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <title>{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %}
        <style type="text/css" id="hs-inline-css">
            /*<![CDATA[*/
            /* everything in this style tag will be inlined onto matching elements */
            .sample-rule {
            }
            /*]]>*/
        </style>
    </head>
    <body>
        <!-- Preview text (text which appears right after subject in certain email clients) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>
        <!-- View as webpage link -->
        {% if content.create_page %}
            <div>
                Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
            </div>
        {% endif %}
        <!-- Insert body here -->
        <!-- Office location information and unsubscribe links -->
        <p id="footer">
            {{ site_settings.company_name }}
            {{ site_settings.company_street_address_1 }}
            {{ site_settings.company_street_address_2 }}
            {{ site_settings.company_city }}
            {{ site_settings.company_state }}
            {{ site_settings.company_zip }}
            {{ site_settings.company_country }}
            <br/>
            You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
            <br/>
            Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}">email preferences</a> to choose the types of emails you receive.
            <br/>
            <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}">Unsubscribe from all future emails</a>
        </p>
    </body>
</html>