Sample HTML email

This HTML email sample is provided to help testing as explained in the developer guide to using the campaign create API.

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">

<head>\r\n
  <!--[if gte mso 9]><xml>\r\n     <o:OfficeDocumentSettings>\r\n      <o:AllowPNG/>\r\n      <o:PixelsPerInch>96</o:PixelsPerInch>\r\n     </o:OfficeDocumentSettings>\r\n    </xml><![endif]-->\r\n
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\r\n
  <meta name=\"viewport\" content=\"width=device-width\" />\r\n
  <!--[if !mso]><!-->
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
  <!--<![endif]-->\r\n <title></title>\r\n \r\n \r\n <style type=\"text/css\" id=\"media-query\">
    \r\n body {
      \r\n margin: 0;
      \r\n padding: 0;
    }

    \r\n\r\ntable,
    tr,
    td {
      \r\n vertical-align: top;
      \r\n border-collapse: collapse;
    }

    \r\n\r\n.ie-browser table,
    .mso-container table {
      \r\n table-layout: fixed;
    }

    \r\n\r\n* {
      \r\n line-height: inherit;
    }

    \r\n\r\na[x-apple-data-detectors=true] {
      \r\n color: inherit !important;
      \r\n text-decoration: none !important;
    }

    \r\n\r\n[owa] .img-container div,
    [owa] .img-container button {
      \r\n display: block !important;
    }

    \r\n\r\n[owa] .fullwidth button {
      \r\n width: 100% !important;
    }

    \r\n\r\n[owa] .block-grid .col {
      \r\n display: table-cell;
      \r\n float: none !important;
      \r\n vertical-align: top;
    }

    \r\n\r\n.ie-browser .num12,
    .ie-browser .block-grid,
    [owa] .num12,
    [owa] .block-grid {
      \r\n width: 500px !important;
    }

    \r\n\r\n.ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      \r\n line-height: 100%;
    }

    \r\n\r\n.ie-browser .mixed-two-up .num4,
    [owa] .mixed-two-up .num4 {
      \r\n width: 164px !important;
    }

    \r\n\r\n.ie-browser .mixed-two-up .num8,
    [owa] .mixed-two-up .num8 {
      \r\n width: 328px !important;
    }

    \r\n\r\n.ie-browser .block-grid.two-up .col,
    [owa] .block-grid.two-up .col {
      \r\n width: 250px !important;
    }

    \r\n\r\n.ie-browser .block-grid.three-up .col,
    [owa] .block-grid.three-up .col {
      \r\n width: 166px !important;
    }

    \r\n\r\n.ie-browser .block-grid.four-up .col,
    [owa] .block-grid.four-up .col {
      \r\n width: 125px !important;
    }

    \r\n\r\n.ie-browser .block-grid.five-up .col,
    [owa] .block-grid.five-up .col {
      \r\n width: 100px !important;
    }

    \r\n\r\n.ie-browser .block-grid.six-up .col,
    [owa] .block-grid.six-up .col {
      \r\n width: 83px !important;
    }

    \r\n\r\n.ie-browser .block-grid.seven-up .col,
    [owa] .block-grid.seven-up .col {
      \r\n width: 71px !important;
    }

    \r\n\r\n.ie-browser .block-grid.eight-up .col,
    [owa] .block-grid.eight-up .col {
      \r\n width: 62px !important;
    }

    \r\n\r\n.ie-browser .block-grid.nine-up .col,
    [owa] .block-grid.nine-up .col {
      \r\n width: 55px !important;
    }

    \r\n\r\n.ie-browser .block-grid.ten-up .col,
    [owa] .block-grid.ten-up .col {
      \r\n width: 50px !important;
    }

    \r\n\r\n.ie-browser .block-grid.eleven-up .col,
    [owa] .block-grid.eleven-up .col {
      \r\n width: 45px !important;
    }

    \r\n\r\n.ie-browser .block-grid.twelve-up .col,
    [owa] .block-grid.twelve-up .col {
      \r\n width: 41px !important;
    }

    \r\n\r\[email protected] only screen and (min-width: 520px) {
      \r\n .block-grid {
        \r\n width: 500px !important;
      }

      \r\n .block-grid .col {
        \r\n vertical-align: top;
      }

      \r\n .block-grid .col.num12 {
        \r\n width: 500px !important;
      }

      \r\n .block-grid.mixed-two-up .col.num4 {
        \r\n width: 164px !important;
      }

      \r\n .block-grid.mixed-two-up .col.num8 {
        \r\n width: 328px !important;
      }

      \r\n .block-grid.two-up .col {
        \r\n width: 250px !important;
      }

      \r\n .block-grid.three-up .col {
        \r\n width: 166px !important;
      }

      \r\n .block-grid.four-up .col {
        \r\n width: 125px !important;
      }

      \r\n .block-grid.five-up .col {
        \r\n width: 100px !important;
      }

      \r\n .block-grid.six-up .col {
        \r\n width: 83px !important;
      }

      \r\n .block-grid.seven-up .col {
        \r\n width: 71px !important;
      }

      \r\n .block-grid.eight-up .col {
        \r\n width: 62px !important;
      }

      \r\n .block-grid.nine-up .col {
        \r\n width: 55px !important;
      }

      \r\n .block-grid.ten-up .col {
        \r\n width: 50px !important;
      }

      \r\n .block-grid.eleven-up .col {
        \r\n width: 45px !important;
      }

      \r\n .block-grid.twelve-up .col {
        \r\n width: 41px !important;
      }
    }

    \r\n\r\[email protected] (max-width: 520px) {

      \r\n .block-grid,
      .col {
        \r\n min-width: 320px !important;
        \r\n max-width: 100% !important;
        \r\n display: block !important;
      }

      \r\n .block-grid {
        \r\n width: calc(100% - 40px) !important;
      }

      \r\n .col {
        \r\n width: 100% !important;
      }

      \r\n .col>div {
        \r\n margin: 0 auto;
      }

      \r\n img.fullwidth,
      img.fullwidthOnMobile {
        \r\n max-width: 100% !important;
      }

      \r\n .no-stack .col {
        \r\n min-width: 0 !important;
        \r\n display: table-cell !important;
      }

      \r\n .no-stack.two-up .col {
        \r\n width: 50% !important;
      }

      \r\n .no-stack.mixed-two-up .col.num4 {
        \r\n width: 33% !important;
      }

      \r\n .no-stack.mixed-two-up .col.num8 {
        \r\n width: 66% !important;
      }

      \r\n .no-stack.three-up .col.num4 {
        \r\n width: 33% !important;
      }

      \r\n .no-stack.four-up .col.num3 {
        \r\n width: 25% !important;
      }

      \r\n .mobile_hide {
        \r\n min-height: 0px;
        \r\n max-height: 0px;
        \r\n max-width: 0px;
        \r\n display: none;
        \r\n overflow: hidden;
        \r\n font-size: 0px;
      }
    }

    \r\n\r\n
  </style>\r\n<script async src='/cdn-cgi/bm/cv/669835187/api.js'></script>
</head>\r\n

<body class=\"clean-body\" style=\"margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #464c4f\">\r\n <style type=\"text/css\" id=\"media-query-bodytag\">
    \r\n @media (max-width: 520px) {
      \r\n .block-grid {
        \r\n min-width: 320px !important;
        \r\n max-width: 100% !important;
        \r\n width: 100% !important;
        \r\n display: block !important;
        \r\n
      }

      \r\n\r\n .col {
        \r\n min-width: 320px !important;
        \r\n max-width: 100% !important;
        \r\n width: 100% !important;
        \r\n display: block !important;
        \r\n
      }

      \r\n\r\n .col>div {
        \r\n margin: 0 auto;
        \r\n
      }

      \r\n\r\n img.fullwidth {
        \r\n max-width: 100% !important;
        \r\n
      }

      \r\n\t\t\timg.fullwidthOnMobile {
        \r\n max-width: 100% !important;
        \r\n
      }

      \r\n .no-stack .col {
        \r\n\t\t\t\tmin-width: 0 !important;
        \r\n\t\t\t\tdisplay: table-cell !important;
        \r\n\t\t\t
      }

      \r\n\t\t\t.no-stack.two-up .col {
        \r\n\t\t\t\twidth: 50% !important;
        \r\n\t\t\t
      }

      \r\n\t\t\t.no-stack.mixed-two-up .col.num4 {
        \r\n\t\t\t\twidth: 33% !important;
        \r\n\t\t\t
      }

      \r\n\t\t\t.no-stack.mixed-two-up .col.num8 {
        \r\n\t\t\t\twidth: 66% !important;
        \r\n\t\t\t
      }

      \r\n\t\t\t.no-stack.three-up .col.num4 {
        \r\n\t\t\t\twidth: 33% !important;
        \r\n\t\t\t
      }

      \r\n\t\t\t.no-stack.four-up .col.num3 {
        \r\n\t\t\t\twidth: 25% !important;
        \r\n\t\t\t
      }

      \r\n .mobile_hide {
        \r\n min-height: 0px !important;
        \r\n max-height: 0px !important;
        \r\n max-width: 0px !important;
        \r\n display: none !important;
        \r\n overflow: hidden !important;
        \r\n font-size: 0px !important;
        \r\n
      }

      \r\n
    }

    \r\n
  </style>\r\n
  <!--[if IE]><div class=\"ie-browser\"><![endif]-->\r\n
  <!--[if mso]><div class=\"mso-container\"><![endif]-->\r\n <table class=\"nl-container\" style=\"border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width:
    320px;Margin: 0 auto;background-color: #464c4f;width: 100%\" cellpadding=\"0\" cellspacing=\"0\">\r\n\t<tbody>\r\n\t<tr style=\"vertical-align: top\">\r\n\t\t<td style=\"word-break: break-word;border-collapse: collapse !important;vertical-align:
          top\">\r\n
          <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color: #464c4f;\"><![endif]-->\r\n\r\n <div style=\"background-color:#0F0D0D;\">\r\n <div style=\"Margin:
              0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid two-up \">\r\n <div style=\"border-collapse: collapse;display:
                table;width: 100%;background-color:transparent;\">\r\n
                <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:#0F0D0D;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
                <!--[if (mso)|(IE)]><td align=\"center\" width=\"250\" style=\" width:250px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
                <div class=\"col num6\" style=\"max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
                    <!--[if (!mso)&(!IE)]><!-->
                    <div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
                      0px;\">
                      <!--<![endif]-->\r\n\r\n \r\n <div align=\"left\" class=\"img-container left autowidth \" style=\"padding-right: 0px; padding-left: 0px;\">\r\n
                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr style=\"line-height:0px;line-height:0px;\"><td style=\"padding-right: 0px; padding-left: 0px;\" align=\"left\"><![endif]-->\r\n <img
                          class=\"left autowidth \" align=\"left\" border=\"0\" src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/5f31cabf-16c2-4052-9f5b-d56ecc263451/19d6011e77a68eb06404e2a9c880f02d63fb23f0/logo_1.png\"
                          alt=\"Image\" title=\"Image\" style=\"outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: 0;height: auto;float: none;width: 100%;max-width: 200px\"
                          width=\"200\" />\r\n
                        <!--[if mso]></td></tr></table><![endif]-->\r\n
                      </div>\r\n\r\n \r\n
                      <!--[if (!mso)&(!IE)]><!-->
                    </div>
                    <!--<![endif]-->\r\n
                  </div>\r\n </div>\r\n
                <!--[if (mso)|(IE)]></td><td align=\"center\" width=\"250\" style=\" width:250px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
                <div class=\"col num6\" style=\"max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
                    <!--[if (!mso)&(!IE)]><!-->
                    <div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
                      0px;\">
                      <!--<![endif]-->\r\n\r\n \r\n <div class=\"\">\r\n\t
                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\"><![endif]-->\r\n\t<div
                          style=\"color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;line-height:120%; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\">\t\r\n\t\t<div
                            style=\"font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;text-align:left;\">
                            <p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: right\">Editor 2.0 now available</p>
                          </div>\t\r\n\t</div>\r\n\t
                        <!--[if mso]></td></tr></table><![endif]-->\r\n
                      </div>\r\n \r\n
                      <!--[if (!mso)&(!IE)]><!-->
                    </div>
                    <!--<![endif]-->\r\n
                  </div>\r\n </div>\r\n
                <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
              </div>\r\n </div>\r\n </div>
          <div style=\"background-color:transparent;\">\r\n <div style=\"Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid \">
              \r\n <div style=\"border-collapse: collapse;display: table;width: 100%;background-color:transparent;\">\r\n
                <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:transparent;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
                <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\" width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px dotted transparent; border-left: 0px dotted transparent; border-bottom: 0px dotted transparent; border-right: 0px dotted transparent;\" valign=\"top\"><![endif]-->\r\n
                <div class=\"col num12\" style=\"min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
                    <!--[if (!mso)&(!IE)]><!-->
                    <div style=\"border-top: 0px dotted transparent; border-left: 0px dotted transparent; border-bottom: 0px dotted transparent; border-right: 0px dotted transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px;
                      padding-left: 0px;\">
                      <!--<![endif]-->\r\n\r\n \r\n <div class=\"\">\r\n\t
                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\"><![endif]-->\r\n\t<div
                          style=\"color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;line-height:120%; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\">\t\r\n\t\t<div
                            style=\"font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;text-align:left;\">
                            <p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(255, 255, 255); font-size: 24px; line-height: 28px;\">The New Drag and Drop Editor is Here!</span></p>
                            <p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(255, 255, 255); font-size: 24px; line-height: 28px;\"><br data-mce-bogus=\"1\" /></span></p>
                            <p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(153, 153, 153); font-size: 12px; line-height: 14px;\">Our amazing email editor with built in responsive design has now
                                become even better, giving you full control over rows and columns</span></p>
                          </div>\t\r\n\t</div>\r\n\t
                        <!--[if mso]></td></tr></table><![endif]-->\r\n
                      </div>\r\n \r\n
                      <!--[if (!mso)&(!IE)]><!-->
                    </div>
                    <!--<![endif]-->\r\n
                  </div>\r\n </div>\r\n
                <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
              </div>\r\n </div>\r\n </div>
          <div style=\"background-color:transparent;\">\r\n <div style=\"Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid \">
              \r\n <div style=\"border-collapse: collapse;display: table;width: 100%;background-color:transparent;\">\r\n
                <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:transparent;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
                <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\" width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
                <div class=\"col num12\" style=\"min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
                    <!--[if (!mso)&(!IE)]><!-->
                    <div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
                      0px;\">
                      <!--<![endif]-->\r\n\r\n \r\n <div align=\"center\" class=\"img-container center autowidth \" style=\"padding-right: 0px; padding-left: 0px;\">\r\n
                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr style=\"line-height:0px;line-height:0px;\"><td style=\"padding-right: 0px; padding-left: 0px;\" align=\"center\"><![endif]-->\r\n <img
                          class=\"center autowidth \" align=\"center\" border=\"0\"
                          src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/5f31cabf-16c2-4052-9f5b-d56ecc263451/19d6011e77a68eb06404e2a9c880f02d63fb23f0/Screen%20Shot%202018-07-26%20at%2015.24.15.png\" alt=\"Image\"
                          title=\"Image\" style=\"outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: 0;height: auto;float: none;width: 100%;max-width: 290px\" width=\"290\" />\r\n
                        <!--[if mso]></td></tr></table><![endif]-->\r\n
                      </div>\r\n\r\n \r\n
                      <!--[if (!mso)&(!IE)]><!-->
                    </div>
                    <!--<![endif]-->\r\n
                  </div>\r\n </div>\r\n
                <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
              </div>\r\n </div>\r\n </div>
          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n\t\t
        </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n
  <!--[if (mso)|(IE)]></div><![endif]-->\r\n\r\n\r\n<div style=\"font-size: 0\"><img src=\"{{ system.url.open }}\" width=\"1\" height=\"1\" alt=\"\" /></div>
  <script type="text/javascript">
    (function() {
      window['__CF$cv$params'] = {
        r: '6687c8e3de4bff5c',
        m: 'db8b985a09bc15203ac561fea2216eb08d726e7f-1625227971-1800-AQvlpXDUbQREv7TVIu0htHTwTtDVg169iOSRMsaGazI4IJCVi7SOjrqvWSENT2aBXYj6ot/R3ugyNd3sHHpK7DG3qylnl8x0YVxuDxveoIh/k9rsMC7WFA6xT1V+E+m+zGzWiJKBVE8gQ68OZ0gh6HqULPmUTPw7ynqG3E6I0cy0WcDTJWyKfXPv4v5etuPmYmy74nG7L6iXMJCnE7qlSjg=',
        s: [0x34a3fec001, 0x7fcd524cd3],
      }
    })();
  </script>
</body>

</html>