Email Boilerplate (Responsys/Marketo)

This is the starting point for all one-off emails utilizing Responsys or Marketo. You will see in the code where specific elements are to be placed. This page will be continuously updated, so please use what you find here as your starting point.

Responsys


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Allianz Life</title>
    <link rel="shortcut icon" href="https://www.allianzlife.com/~/media/images/allianz/em/bits/logos/favicon">
    <style type="text/css">
      /* Basics */
      div[style*="margin: 16px 0"] { 
        margin:0 !important;
      }
      .event>p {
        text-align:center;
      }
      .d-hide {
        display:inline-block!important;
      }
      p {
        line-height:1.5!important;
      }
      h1 {
        font-size:30px!important;
      }
      h2 {
        font-size:24px!important;
      }
      h3 {
        font-size:20px!important;
      }
      
      @media screen and (max-width: 660px) {
        .center>div {
          text-align:center!important;
        }  
        .m-hide {
          display:none!important;
          height:0!important;
          width:0!important;
        }
      }
      
      
      @media screen and (min-width: 661px) {
        .align-left {
          text-align:left!important;
        }
        .align-right {
          text-align:right!important; 
        }
        .m-hide {
          display:inline-block!important;
        }
        .d-hide {
          display:none!important;
          mso-hide:all!important;
          visibility:hidden;
          overflow:hidden;
          width:0;
          height:0;
        }
        .mobile-full {
          padding-left:20px;
          padding-right:20px;
        }
        .col-left {
          text-align:left!important;
          padding-left:20px!important;
        }
        .col-right {
          text-align:right!important;
          padding-right:20px!important;
        }
        .header-left {
          text-align:left!important;
          max-width:200px!important;
          display:inline-block;
        }
        .header-right {
          text-align:right!important;
          max-width:460px!important;
          display:inline-block;
        }
        .header-left-ny {
          text-align:left!important;
          max-width:150px!important;
          display:inline-block;
        }
        .header-right-ny {
          text-align:right!important;
          max-width:470px!important;
          display:inline-block;
        }
        .branding-left {
          text-align:right!important;
          max-width:230px!important;
          display:inline-block;
        }
        .branding-right {
          text-align:left!important;
          max-width:430px!important;
          display:inline-block;
        }
        .inline {
          display:inline!important;
        }
        .two-col {
          max-width:50%;
        }
        .two-col .col {
          max-width:300px;
        }
        .event .col {
          max-width:280px;
        }
        .event>p {
          text-align:left;
        }
        .button-40 {
          max-width:40%!important;
        }      
        .button-50 {
          max-width:50%!important;
        }
        .button-60 {
          max-width:60%!important;
        }
        .button-80 {
          max-width:80%!important;
        }
        .button-full {
          width:100%!important;
        }
        .btn-table {
          margin:0!important;
          text-align:left!important
        }        
        .no-pad {
          padding-left:0!important;
          padding-right:0!important;
          padding-top:0!important;
          padding-bottom:0!important;
        }
        .max-330 {
          max-width: 330px;
        }
        .nopad {
          padding: 0!important;
        }
        .padding-10 {
          padding: 10px!important;
        }
        .padding-20 {
          padding: 20px!important;
        }
        .padding-top-10 {
          padding: 10px 0 0 0!important;
        }        
        .padding-top-20 {
          padding: 20px 0 0 0!important;
        }
        .padding-left-10 {
          padding: 0 0 0 10px!important;
        }
        .padding-left-20 {
          padding: 0 0 0 20px!important;
        }
        .padding-left-100 {
          padding: 0 0 0 100px!important;
        }
        .padding-right-10 {
          padding: 0 10px 0 0!important;
        }          
        .padding-right-20 {
          padding: 0 20px 0 0!important;
        }
        .padding-rightleft-10 {
          padding: 0 10px!important;
        }
        .padding-rightleft-20 {
          padding: 0 20px 0 20px!important;
        }
        .padding-topbottom-20 {
          padding: 20px 0 20px 0!important;
        }
        .text {
          font-size:16px!important;
        }
        .float {
          display: inline!important;
          float: left!important;
          margin:0 20px 0 0!important;
        }
      
        .btn {
          background: #FEFEFE !important;
        }
      
        .btn-text {
          background: transparent !important;
          border-radius: 4px;
          color: #000000 !important;
        }
      
        .btn-secondary {
          background: transparent !important;
        }
      
      }
    </style>
    <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
        table {border-collapse: collapse !important;}
        .d-hide { display:none!important; mso-hide:all!important; visibility:hidden; overflow:hidden; width:0; height:0; }
        .m-hide { display:inline-block!important; }
      </style>
    <![endif]-->
    <!--[if mso]>
    <style type="text/css">
      body, table, td, div, span, p {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;}
      .col>div { text-align: left; }
      .h1 { padding-top:10px!important; }
    </style>
    <![endif]-->
  </head>

  <body style="margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; margin-left:0 !important; padding-top:0; padding-bottom:0; padding-left:0; padding-right:0; background-color:#f3f3f3; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">

    <!-- INVISIBLE PREHEADER -->
    <style type="text/css">
      div.preheader {
        display: none !important;
      }
    </style>
    <div class="preheader" style="font-size: 1px; display: none !important;">
      Allianz Life
    </div>
    <!-- END INVISIBLE PREHEADER -->

    <center class="wrapper" style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
      <div class="webkit" style="max-width:660px; margin-top:0; margin-bottom:0; margin-right:auto; margin-left:auto; background-color:#f3f3f3;">
        <!--[if (gte mso 9)|(IE)]>
        <table cellpadding="0" cellspacing="0" border="0" width="660" align="center" style="border-spacing:0;">
        <tr>
        <td style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
        <![endif]-->

        [INSERT HEADER AND BODY CONTENT HERE]      


        [REPLACE ME WITH THE FOOTER]

        <!-- DISCLOSURES -->
        <table cellpadding="0" cellspacing="0" border="0" align="center" style="border-spacing:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; Margin:0 auto; width:100%; max-width:660px;">
          <tr>
            <td style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                <tr>
                  <td class="disclosures" style="padding-top:20px; padding-bottom:20px; padding-right:20px; padding-left:20px; width:100%; text-align:left; font-size:14px; color:#4d4d4f; line-height:normal;">

                    [INSERT DISCLOSURE COPY HERE]

                    <p class="disclosure" style="Margin-top:0; Margin-bottom:1.5em;">You may <a href="${unsubscribelink}" target="_blank" style="color:#4d4d4f; text-decoration: underline;">unsubscribe</a> from Allianz emails.</p>

                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 14px; line-height: 14px; font-weight: normal;">
                      <tr valign="bottom" style="color:#4d4d4f;">
                        <td>EFIX-XXXX</td>
                        <td style="text-align:right;">(MM/YYYY)</td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- END DISCLOSURES -->


        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
    </center>
  </body>
</html>

Marketo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Allianz Life</title>
    <link rel="shortcut icon" href="https://www.allianzlife.com/~/media/images/allianz/em/bits/logos/favicon">
    <style type="text/css">
      /* Basics */
      div[style*="margin: 16px 0"] { 
        margin:0 !important;
      }
      .event>p {
        text-align:center;
      }
      .d-hide {
        display:inline-block!important;
      }
      p {
        line-height:1.5!important;
      }
      h1 {
        font-size:30px!important;
      }
      h2 {
        font-size:24px!important;
      }
      h3 {
        font-size:20px!important;
      }   
            
      @media screen and (max-width: 660px) {
        .center>div {
          text-align:center!important;
        }  
        .m-hide {
          display:none!important;
          height:0!important;
          width:0!important;
        }
      }
      
      
      @media screen and (min-width: 661px) {
        .align-left {
          text-align:left!important;
        }
        .align-right {
          text-align:right!important; 
        }
        .m-hide {
          display:inline-block!important;
        }
        .d-hide {
          display:none!important;
          mso-hide:all!important;
          visibility:hidden;
          overflow:hidden;
          width:0;
          height:0;
        }
        .mobile-full {
          padding-left:20px;
          padding-right:20px;
        }
        .col-left {
          text-align:left!important;
          padding-left:20px!important;
        }
        .col-right {
          text-align:right!important;
          padding-right:20px!important;
        }
        .header-left {
          text-align:left!important;
          max-width:200px!important;
          display:inline-block;
        }
        .header-right {
          text-align:right!important;
          max-width:460px!important;
          display:inline-block;
        }
        .header-left-ny {
          text-align:left!important;
          max-width:150px!important;
          display:inline-block;
        }
        .header-right-ny {
          text-align:right!important;
          max-width:470px!important;
          display:inline-block;
        }
        .branding-left {
          text-align:right!important;
          max-width:230px!important;
          display:inline-block;
        }
        .branding-right {
          text-align:left!important;
          max-width:430px!important;
          display:inline-block;
        }
        .inline {
          display:inline!important;
        }
        .two-col {
          max-width:50%;
        }
        .two-col .col {
          max-width:300px;
        }
        .event .col {
          max-width:280px;
        }
        .event>p {
          text-align:left;
        }
        .button-40 {
          max-width:40%!important;
        }      
        .button-50 {
          max-width:50%!important;
        }
        .button-60 {
          max-width:60%!important;
        }
        .button-80 {
          max-width:80%!important;
        }
        .button-full {
          width:100%!important;
        }
        .btn-table {
          margin:0!important;
          text-align:left!important
        }        
        .no-pad {
          padding-left:0!important;
          padding-right:0!important;
          padding-top:0!important;
          padding-bottom:0!important;
        }
        .max-330 {
          max-width: 330px;
        }
        .nopad {
          padding: 0!important;
        }
        .padding-10 {
          padding: 10px!important;
        }
        .padding-20 {
          padding: 20px!important;
        }
        .padding-top-10 {
          padding: 10px 0 0 0!important;
        }        
        .padding-top-20 {
          padding: 20px 0 0 0!important;
        }
        .padding-left-10 {
          padding: 0 0 0 10px!important;
        }
        .padding-left-20 {
          padding: 0 0 0 20px!important;
        }
        .padding-left-100 {
          padding: 0 0 0 100px!important;
        }
        .padding-right-10 {
          padding: 0 10px 0 0!important;
        }          
        .padding-right-20 {
          padding: 0 20px 0 0!important;
        }
        .padding-rightleft-10 {
          padding: 0 10px!important;
        }
        .padding-rightleft-20 {
          padding: 0 20px 0 20px!important;
        }
        .padding-topbottom-20 {
          padding: 20px 0 20px 0!important;
        }
        .text {
          font-size:16px!important;
        }
        .float {
          display: inline!important;
          float: left!important;
          margin:0 20px 0 0!important;
        }
      
        .btn {
          background: #FEFEFE !important;
        }
      
        .btn-text {
          background: transparent !important;
          border-radius: 4px;
          color: #000000 !important;
        }
      
        .btn-secondary {
          background: transparent !important;
        }
      
      }
    </style>
    <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
        table {border-collapse: collapse !important;}
        .d-hide { display:none!important; mso-hide:all!important; visibility:hidden; overflow:hidden; width:0; height:0; }
        .m-hide { display:inline-block!important; }
      </style>
    <![endif]-->
    <!--[if mso]>
    <style type="text/css">
      body, table, td, div, span, p {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;}
      .col>div { text-align: left; }
      .h1 { padding-top:10px!important; }
    </style>
    <![endif]-->
  </head>

  <body style="margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; margin-left:0 !important; padding-top:0; padding-bottom:0; padding-left:0; padding-right:0; background-color:#f3f3f3; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">

    <!-- INVISIBLE PREHEADER -->
    <style type="text/css">
      div.preheader {
        display: none !important;
      }
    </style>
    <div class="preheader" style="font-size: 1px; display: none !important;">
      Allianz Life
    </div>
    <!-- END INVISIBLE PREHEADER -->

    <center class="wrapper" style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
      <div class="webkit" style="max-width:660px; margin-top:0; margin-bottom:0; margin-right:auto; margin-left:auto; background-color:#f3f3f3;">
        <!--[if (gte mso 9)|(IE)]>
        <table cellpadding="0" cellspacing="0" border="0" width="660" align="center" style="border-spacing:0;">
        <tr>
        <td style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
        <![endif]-->

        <!-- VIEW AS WEB LINK -->
        <table cellpadding="0" cellspacing="0" border="0" style="Margin:0 auto; width:100%; max-width:660px; text-align:right;" align="right">
          <tr>
            <td class="m-hide" valign="middle" align="right" style="text-align:right!important; vertical-align:middle; padding:10px; color:#3c3c3c;">
              <div class="align-right" style="text-align:right; font-size:12px; color:#898d94; text-decoration:none; padding-top:0;"><a href="{{system.viewAsWebpageLink}}" style="color: #898d94; text-decoration:underline;">Trouble viewing this email?</a></div>
            </td>
          </tr>
        </table>
        <!-- END VIEW AS WEB LINK -->

        [INSERT HEADER AND BODY CONTENT HERE]      

        [REPLACE ME WITH THE FOOTER]

        <!-- DISCLOSURES -->
        <table cellpadding="0" cellspacing="0" border="0" align="center" style="border-spacing:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; Margin:0 auto; width:100%; max-width:660px;">
          <tr>
            <td style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                <tr>
                  <td class="disclosures" style="padding-top:20px; padding-bottom:20px; padding-right:20px; padding-left:20px; width:100%; text-align:left; font-size:14px; color:#4d4d4f; line-height:normal;">

                    [INSERT DISCLOSURE COPY HERE]

                    <p class="disclosure" style="Margin-top:0; Margin-bottom:1.5em;">You may <a href="{{system.unsubscribeLink}}" target="_blank" style="color:#4d4d4f; text-decoration: underline;">unsubscribe</a> from Allianz emails.</p>

                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 14px; line-height: 14px; font-weight: normal;">
                      <tr valign="bottom" style="color:#4d4d4f;">
                        <td>EFIX-XXXX</td>
                        <td style="text-align:right;">(MM/YYYY)</td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- END DISCLOSURES -->


        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
    </center>
  </body>
</html>

Login / Register
- Login / Register
  Username*
  
  Password*
  
  Remember me
  
  Forgot username?
  
  Forgot password?
  
  Register Register
Contact Us
Social Media
Social
- Connect with Allianz Life
  
  Share your thoughts and get the latest news.
  
  Facebook
  
  Twitter
  
  LinkedIn
  
  YouTube

Email Boilerplate

Responsys

Marketo

Login / Register

Connect with Allianz Life

Error