Skip to content

Getting started

Boilerplate

This is the base you need to build your email templates. See boilerplate.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>Boilerplate - EPFL</title>

    <style>
      img {
        height: auto;
        max-width: 100%;
      }

      a {
        color: #212121;
        text-decoration: underline;
        text-decoration-color: #ff0000;
        transition: all 0.2s ease-in-out;
      }

      a:hover {
        color: #ff0000 !important;
        text-decoration-color: #212121 !important;
      }

      a.btn {
        background: #ff0000;
        border-radius: 2px;
        color: #ffffff;
        display: inline-block;
        padding: 8px 20px;
        text-decoration: none;
      }

      a.btn:hover {
        background: #b51f1f !important;
        color: #ffffff !important;
      }

      a.btn.btn-action {
        background: #ffffff;
        border: 1px solid #707070;
        color: #212121;
      }

      a.btn.btn-action:hover {
        background: #E6E6E6 !important;
        color: #212121 !important;
      }

      u + #body a {
        color: #212121;
        text-decoration: underline;
        text-decoration-color: #ff0000;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }

      .template-container {
        max-width: 640px !important;
      }

      @media only screen and (min-width:768px) {
        .template-container {
          width:640px !important;
        }
      }

    </style>
  </head>

  <body id="body" style="border: 0; margin: 0; padding: 0;">
    <table style="border-collapse: collapse; color: #212121; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.3em; max-width: 100%;" width="100%">
      <tr>
        <td align="center" style="padding: 20px;">

          <table class="template-container" style="border-collapse: collapse; max-width: 640px; width: 100%;" width="100%">
            <tr>
              <td>
                <table style="border-collapse: collapse; max-width: 640px; width: 100%;" width="100%">
                  <tr>
                    <td style="border-bottom: 2px solid #d5d5d5; padding: 20px 0;" valign="middle">
                      <img alt="EPFL" height="32" src="https://web2018.epfl.ch/5.2.0/icons/epfl-logo.png" width="110">
                    </td>
                    <td style="border-bottom: 2px solid #d5d5d5; text-align: right;" valign="middle">
                      <p style="font-size: 16px; font-weight: bold; margin: 0; text-align: right;">
                        <img alt="▪" height="7" src="https://web2018.epfl.ch/5.2.0/icons/square.png" style="margin: 0" width="8">
                        <span style="margin-left: 5px">App title</span>
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td style="height: 20px;">&nbsp;</td>
            </tr>
            <tr>
              <td style="background: #e6e6e6;">
                <table style="border-collapse: collapse; max-width: 640px; width: 100%;" width="100%">
                  <tr>
                    <td align="center" style="padding: 20px;">
                      <p style="color: #707070; font-size: 15px; line-height: 20px; margin: 0; text-align: center;">
                        &copy; 2021 EPFL, all rights reserved
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

        </td>
      </tr>
    </table>
  </body>

</html>