Email Template

Merge fields

Customer nameCareers / Corporate URL
Footer background
Pick a colour or paste a hex code.
Footer text colour
Pick a colour or paste a hex code.
These values will populate the footer line and the link inside the email HTML on the right.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table tr td { padding: 0px; }
body { background-color: #f3f3f3; }
.container { width: 600px; margin: auto; font-family: Arial, sans-serif; color: #101010; font-size: 14px; font-weight: 400; line-height: 21px; border-spacing: 0; }
h1, h2, h3, h4, h5, h6, p { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: normal; }
p { font-family: Arial, sans-serif; font-weight: 400; }
h1 { size: 25px; line-height: 25px; color: #000; }
h2 { size: 20px; line-height: 23px; color: #000; }
.main { width: 100%; background-color: #fff; display: table; }
.footer a, .footer p, .footer td { color: #fff !important; font-size: 12px; }
.unsubscribe { text-align: center; }
.dark-bg h1 { color: #fff; }
.quote-block p { font-size: 20px; line-height: 23px; color: #000000; font-style: italic; font-weight: 400; }
.quote-block h3 { font-size: 12px; line-height: 18px; font-weight: 700; color: #000; }
.quote-block h4 { color: #5A657B; font-size: 10px; line-height: 15px; font-weight: 400; }
a.button { margin-bottom: 10px; }
a.button.button1, a.button.button1:hover, a.button.button1:focus, a.button.button1:active { background: #101010; color: #ffffff; padding: 10px 25px; border-radius: 35px; text-decoration: none; display: inline-block; }
a.button.button2, a.button.button2:hover, a.button.button2:focus, a.button.button2:active { background: #101010; color: #ffffff; padding: 10px 25px; border-radius: 35px; text-decoration: none; }
a.button.button3, a.button.button3:hover, a.button.button3:focus, a.button.button3:active { background: #101010; color: #ffffff; padding: 10px 25px; border-radius: 35px; text-decoration: none; }
a.button.button4, a.button.button4:hover, a.button.button4:focus, a.button.button4:active { background: #ffffff; color: #101010; padding: 10px 25px; border-radius: 35px; text-decoration: none; }
strong { color: #000; }
a, a:hover, a:focus, a:active, a:visited { color: #101010; font-weight: 700; }
a[href]#email_foooter_blocks { color: #fff !important; }
@media only screen and (max-width: 600px) {
  .main { width: 100% !important; min-width: 300px !important; }
  .container { width: 100% !important; min-width: 300px !important; }
  .content { padding: 0; }
  p { font-size: 18px; }
}
/* ----- Job Lists ----- */
table.jobs-list { width: 100%; }
.job td { padding: 20px 16px; border-top: solid 2px #eeeeee; }
.job-title { line-height: 30px }
.job-location { margin-top: 0px; padding-bottom: 10px; }
.job-summary { padding-bottom: 10px; }
.job-link { display: block; text-decoration: none; font-weight: bold; color: #101010; }
/* ----- Live Chats ----- */
table.ct-live-chats { width: 100%; }
.ct-live-chat td { padding: 20px 16px; border-top: solid 2px #eeeeee; }
.ct-live-chat-title { line-height: 30px; }
.ct-live-chat-link { display: block; text-decoration: none; font-weight: bold; color: #348eda; }
/* ----- Discussions ----- */
table.ct-discussions { width: 100%; }
.ct-discussion td { padding: 20px 16px; margin-bottom: 16px; border-top: solid 2px #eeeeee; }
.ct-discussion-title { line-height: 30px; }
.ct-discussion-link { display: block; text-decoration: none; font-weight: bold; color: #348eda; }
a[id*="candidate_settings_url"], a[id*="candidates_unsubscribe"] { color: #fff !important; }
.ct-email-row { padding:20px; }
</style>
</head>
<body style="" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
  <div id="background_table">
    <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
      {% email_preheader %}
    </div>

    <!--[if mso]>
    <table align="center" cellpadding="0" cellspacing="0" border="0" role="presentation" width="600" style="width:600px;">
      <tr><td>
    <![endif]-->

    <div class="container">
      <div class="content">
        <div class="main">
          <table role="presentation" border="0" cellspacing="0" width="100%" class="ct-email-row" style="padding:20px;" id="email_row_0" bgcolor="#ffffff">
            <tbody>
              <!-- Optional logo block removed for brevity -->
            </tbody>
          </table>

          {% email_rows %}
        </div>

        <!-- FOOTER -->
        <div class="footer">
          <table>
            <tr>
              <td align="left" valign="top">
                <table id="email_footer_blocks" class="bg-footer" bgcolor="#000000" color="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                    <td width="100%" valign="top" style="padding: 0;">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td valign="middle" width="650" height="50" style="margin:0; padding:10px 30px; height:50px; width:650px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="180" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"></table></td>
                                <td></td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td valign="top" width="650" height="50" style="margin:0px; padding:20px 30px 0px 30px; height:50px; width:650px; font-family: Arial, sans-serif; color:#ffffff; font-size: 14px; mso-line-height-rule:exactly; white-space: wrap; line-height:18px;">
                            <span style="font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; text-decoration: none;">
                              Â© {{common.current_year}} Customer Name<br />
                              <a href="#" style="color:#ffffff;font-weight:400;">Customer Name</a>
                            </span>
                          </td>
                        </tr>
                        <tr>
                          <td valign="top" style="margin:0px; padding:20px 30px 0px 30px; height:10px; width:650px; font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; mso-line-height-rule:exactly; white-space: wrap; line-height:18px;">
                            <span style="font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; text-decoration: none;">
                              {% email_unsubscribe %}
                            </span>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>

      {% email_tracking_pixel %}
    </div>

    <!--[if mso]></td></tr></table><![endif]-->
  </div>
</body>
</html>
Email Template

Merge fields

Generated HTML
