Grammarly Layout 1 Email layout Source code

ScreenshotCodePlain Text
HTML19.49 Kb
<!DOCTYPE html>
<html lang="en" style="margin: 0; padding: 0; height: 100%; width: 100%;">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
  <title>Layout 1</title>
  <style type="text/css">
  .tiny-prose :first-child {
    margin-top: 0
  }

  .tiny-prose ul,
  .tiny-prose ol {
    list-style-position: outside;
    padding: 0 0 0 1rem;
  }

  .tiny-prose ul li p,
  .tiny-prose ol li p {
    margin-top: .25em;
    margin-bottom: .25em
  }

  .tiny-prose li p {
    margin: .25em 0 .25em 0;
  }

  .tiny-prose li p:first-child {
    margin-top: 0;
  }

  .tiny-prose li p:last-child {
    margin-bottom: 0;
  }

  .tiny-prose ul {
    list-style-type: disc;
  }

  .tiny-prose ol {
    list-style-type: decimal;
  }

  .tiny-prose ul ul,
  .tiny-prose ol ul {
    list-style-type: circle;
  }

  .tiny-prose ol ol,
  .tiny-prose ul ol {
    list-style-type: lower-roman;
  }

  </style>
  <style type="text/css">
  * {
    margin: 0px;
    text-decoration: none;
  }

  table,
  tbody,
  tr,
  td {
    line-height: 1;
  }

  </style>
  <style type="text/css">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dthjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dphjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdthjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTch9thjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc69thjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcB9xhjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcPtxhjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdxhjZ-Ek-7MeA.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTccNxhjZ-Ek-7MeA.ttf) format('truetype');
  }

  </style>

</head>

<body style="margin: 0; padding: 0; height: 100%; width: 100%; color:#1C1C1C;font-family:Inter;background:#F5F5F5;">
  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;color:#1C1C1C;display:table;position:relative;text-align:center;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
    <tbody>
      <tr align="center" valign="top">
        <td>
          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;max-width:600px;position:relative;padding:24px 0 0;text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
            <tbody>
              <tr align="left" valign="top">
                <td>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;padding:0 0 24px;text-align:left;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                    <tbody>
                      <tr style="display:block;" align="left" valign="middle">
                        <td style="width:auto;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
                            <tbody>
                              <tr style="display:block;" align="left" valign="top">
                                <td style="width:auto;"><a href="https://www.grammarly.com/" target="_blank"><img style="vertical-align:middle;color:#1C1C1C;width:157px;position:static;object-fit:scale-down;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://pagenflow-files.s3.us-east-1.amazonaws.com/media-8451891abbd6-grammarly-primary-lockup-light-bg.png" alt="Image" width="auto" height="auto" loading="eager" /></a></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td style="width:16px;min-width:16px;"></td>
                        <td style="width:auto;">
                          <table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;display:table;position:relative;background-color:#D9D9D9;padding:0px;background:transparent;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                            <tbody>
                              <tr style="display:block;" align="center" valign="middle">
                                <td style="width:auto;"><a style="color:#027E6F;font-size:16px;position:relative;font-weight:600;white-space:nowrap;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://click.grammarly.com/s/c/LyirAAnsDu6zKEqj5NC8KI5VKffwvuKLuYZkbPJ_U_4X8KxYQHSd4HFIv_yNzwVrf11usZAkXYS19eAqh4PE33mPDChCPmrHEdEO5EtXpksw66zgkCdvjKEQBnJeSPmUXJQip1wW2aMrzmAmN0P0vL4jbHdDreowZR0SGS96CJ-d2iulmpwJb8U2F8GxYGm_9nsGADRhtjs0FjPI-G-NwGAuzPr7jL9vES7K3OD3DHThorOkH1jBK2kAsAuW29aESblxExtVVTSsxKgelQBAMmuVYTzBL-_ppqb2vk3RTbF2Jd6j1WXnBhawZOmI7elREXkfuBRIHz_EfMKYOQe8riQepyH1628AuqkZiPMqTwvyPkZuRZ7tv46JSJ3GLj0l6cBmhSMJOmCN8dY_5Aw0VVsInJ785b0XTXkODckZnwG0UUxXOu1Za4kf6AIzW4Q3t9d9zOS8TpvEiksz04aBPGLwTKVH4BGEzGtGS_N19nfjE-Hlq47k8DKltqae7N3lvzgiAit-b3XoanqbASnbInh1htdt_HcqJNBRLohvr7Swa5YBHtpEv6MPWZXiNbHOTdTKwuQMLSvvAg5tY5-gAzuPwOS9C5dmp3C1FC-75SKsUtlkXD1iVI61KScko3jJyTuY1nh9UgVOHmJ8qN3e3s2qX7KP3s3jGoRNZVOt_1EUhyd17-rdhagYBb38n2kFv3qPzPcHowCTM_pkyOAw1e9n0qrJNW7bja5c8QTfkeHPgcJnJpUemSa4YVN8PKX99NMj-1kT9HScb4bS0NjJZw43gRcBLwROIIgys_PUGXeln1dmytEOYDWDJuu_xDVPI6oefEns5svn-F5kn5p2mextPmcw5aumZmD4NIVRLlXItshhNZ6GIK0rQ0sb7mps-OdkRJbAEqzj2UH3oaJDoSnNDF4kexLrR9Z-zgxkjH8gfCSkfRw/7TqacUh2Vapg7UvuuL6b5UoEyCHjNP3a/6" target="_blank">Redeem Your Offer</a></td>
                                <td style="width:8px;min-width:8px;"></td>
                                <td style="width:auto;"><a href="https://click.grammarly.com/s/c/LyirAAnsDu6zKEqj5NC8KI5VKffwvuKLuYZkbPJ_U_4X8KxYQHSd4HFIv_yNzwVrf11usZAkXYS19eAqh4PE33mPDChCPmrHEdEO5EtXpksw66zgkCdvjKEQBnJeSPmUXJQip1wW2aMrzmAmN0P0vL4jbHdDreowZR0SGS96CJ-d2iulmpwJb8U2F8GxYGm_9nsGADRhtjs0FjPI-G-NwGAuzPr7jL9vES7K3OD3DHThorOkH1jBK2kAsAuW29aESblxExtVVTSsxKgelQBAMmuVYTzBL-_ppqb2vk3RTbF2Jd6j1WXnBhawZOmI7elREXkfuBRIHz_EfMKYOQe8riQepyH1628AuqkZiPMqTwvyPkZuRZ7tv46JSJ3GLj0l6cBmhSMJOmCN8dY_5Aw0VVsInJ785b0XTXkODckZnwG0UUxXOu1Za4kf6AIzW4Q3t9d9zOS8TpvEiksz04aBPGLwTKVH4BGEzGtGS_N19nfjE-Hlq47k8DKltqae7N3lvzgiAit-b3XoanqbASnbInh1htdt_HcqJNBRLohvr7Swa5YBHtpEv6MPWZXiNbHOTdTKwuQMLSvvAg5tY5-gAzuPwOS9C5dmp3C1FC-75SKsUtlkXD1iVI61KScko3jJyTuY1nh9UgVOHmJ8qN3e3s2qX7KP3s3jGoRNZVOt_1EUhyd17-rdhagYBb38n2kFv3qPzPcHowCTM_pkyOAw1e9n0qrJNW7bja5c8QTfkeHPgcJnJpUemSa4YVN8PKX99NMj-1kT9HScb4bS0NjJZw43gRcBLwROIIgys_PUGXeln1dmytEOYDWDJuu_xDVPI6oefEns5svn-F5kn5p2mextPmcw5aumZmD4NIVRLlXItshhNZ6GIK0rQ0sb7mps-OdkRJbAEqzj2UH3oaJDoSnNDF4kexLrR9Z-zgxkjH8gfCSkfRw/7TqacUh2Vapg7UvuuL6b5UoEyCHjNP3a/6" target="_blank"><img style="vertical-align:text-bottom;color:#1C1C1C;position:static;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://iconify.pagenflow.com/api/image/16/027E6F/0-cw/lucide:arrow-right.png" alt="Icon" width="auto" height="16px" /></a></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr align="left" valign="top">
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;background:#ffffffff;text-align:center;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
                    <tbody>
                      <tr align="center" valign="top">
                        <td>
                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;height:420px;display:table;position:relative;padding:64px 64px 0;text-align:center;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
                            <tbody>
                              <tr align="center" valign="top">
                                <td><span style="color:#6b7280;font-size:16px;position:relative;text-align:center;font-weight:700;line-height:24px;white-space:pre-line;vertical-align:initial;box-sizing:border-box;display:block;">Email content goes here</span></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr align="left" valign="top">
                <td>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;padding:36px 0;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                    <tbody>
                      <tr style="display:block;" align="center" valign="middle">
                        <td style="width:auto;"><a href="https://www.facebook.com/grammarly" target="_blank"><img style="vertical-align:text-bottom;color:#1C1C1C;position:static;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://iconify.pagenflow.com/api/image/26/545454/0-cw/fa6-brands:facebook-f.png" alt="Icon" width="auto" height="26px" /></a></td>
                        <td style="width:32px;min-width:32px;"></td>
                        <td style="width:auto;"><a href="https://www.instagram.com/grammarly/" target="_blank"><img style="vertical-align:text-bottom;color:#1C1C1C;position:static;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://iconify.pagenflow.com/api/image/26/545454/0-cw/fa6-brands:instagram.png" alt="Icon" width="auto" height="26px" /></a></td>
                        <td style="width:32px;min-width:32px;"></td>
                        <td style="width:auto;"><a href="https://www.linkedin.com/company/grammarly" target="_blank"><img style="vertical-align:text-bottom;color:#1C1C1C;position:static;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://iconify.pagenflow.com/api/image/26/545454/0-cw/fa6-brands:linkedin-in.png" alt="Icon" width="auto" height="26px" /></a></td>
                        <td style="width:32px;min-width:32px;"></td>
                        <td style="width:auto;"><a href="https://twitter.com/grammarly" target="_blank"><img style="vertical-align:text-bottom;color:#1C1C1C;position:static;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://iconify.pagenflow.com/api/image/26/545454/0-cw/fa6-brands:x-twitter.png" alt="Icon" width="auto" height="26px" /></a></td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr align="left" valign="top">
                <td style="display:block;width:100%;">
                  <span style="color:#1C1C1C;width:100%;height:1px;position:relative;margin:0px 0;background:#1c1c1c4d;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;"></span>
                </td>
              </tr>
              <tr align="left" valign="top">
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;padding:28px 0;text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
                    <tbody>
                      <tr align="left" valign="top">
                        <td>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;width:100%;display:table;position:relative;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                            <tbody>
                              <tr style="display:block;" align="center" valign="middle">
                                <td style="width:auto;">
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;display:table;position:relative;border-bottom:1px solid #A8A8A8;padding:0 0 2px;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                                    <tbody>
                                      <tr style="display:block;" align="center" valign="middle">
                                        <td style="width:auto;"><a style="color:#545454;font-size:16px;position:relative;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="#">Email Preferences</a></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                                <td style="width:8px;min-width:8px;"></td>
                                <td style="width:auto;">
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="color:#1C1C1C;display:table;position:relative;border-bottom:1px solid #A8A8A8;padding:0 0 2px;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
                                    <tbody>
                                      <tr style="display:block;" align="center" valign="middle">
                                        <td style="width:auto;"><a style="color:#545454;font-size:16px;position:relative;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="#">Unsubscribe</a></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr style="height:20px;min-height:20px;"></tr>
                      <tr align="left" valign="top">
                        <td><span class="tiny-prose" style="color:#1C1C1C;position:relative;text-align:center;vertical-align:initial;box-sizing:border-box;display:block;">
                            <p><span style="color: #545454; font-size: 13px; line-height: 20px">*Price shown in USD, regional prices may vary. This offer is applicable to the first seat only, is active until 11:59 PM PST on February 19, 2025, and cannot be combined with other offers or discounts or applied to prior purchases. After the promotional period ends, your account will renew at $144.00 USD for the annual plan. Additional terms apply.</span></p>
                            <p><br></p>
                            <p><span style="color: #545454; font-size: 13px; line-height: 20px">You received this offer for Grammarly Pro because you are currently opted in to receive them via your preference settings. You may adjust your preferences at any time by clicking the link above.</span></p>
                            <p><br></p>
                            <p><span style="color: #545454; font-size: 13px; line-height: 20px">© 2025 Grammarly, Inc., 548 Market St. #35410, San Francisco, CA 94104</span></p>
                          </span></td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>
Share
Clone
Disclaimer

This email template was created using Pagenflow's email template builder. Please note that Grammarly as an entity was not involved in the creation, design, or distribution of this template.

Seamless Compatibility

Design once, send everywhere

Your emails will look perfect across all major email clients and devices.

Proton Mail
Zoho Mail
Gmail
Yahoo Mail
Android
Apple Mail
Outlook
And more
Take a lookNo signup required

How it works

How to Edit Grammarly Email Template

Follow these steps to clone, customize, and export your email template using our free email template builder.

1
2
3
4
5
Feature clone email template
Step 1

Clone the Email Template

Start by cloning the email template you want to edit. Cloning creates a duplicate of the original template, allowing you to make changes without affecting the original design.

Note: This step ensures you have a fresh copy to work with, preserving the original template for future use.

Step 2: Update the Template Content

Customize your email template content and design to match your brand.

Note: This step allows you to tailor the template to your specific campaign or purpose.

Step 3: Customize the Design

Customize your email template content and design to match your brand.

Note: This step ensures your template is visually appealing and consistent with your brand identity.

Step 4: Test the Template

Customize your email template content and design to match your brand.

Note: This step helps you catch and fix any issues before sending the email to your audience.

Step 5: Export the Template

Once you're satisfied with your customized template, export it for use in your email campaigns.

Note: This step finalizes your template and makes it ready for use in your campaigns.

You may also like...

Screenshot of Android 16 Android 16 Beta 2 is here 🚀 email template Android 16 Android 16 Beta 2 is here 🚀templateFreeScreenshot of Verify your email address email templateVerify your email addresstemplateFreeScreenshot of Make distractions disappear. email templateMake distractions disappear.templateFree
Explore email templates