app-MAIL-temp/templates/emails/_emailhelpers.html

{% macro render_text(text) %}
  <p style="font-size: 16px;
            line-height: 1.625;
            color: #51545E;
            margin: .4em 0 1.1875em;">{{ text }}</p>
{% endmacro %}
<!-- To be used instead of render_text, much better! -->
{% macro text() %}
  <p style="font-size: 16px;
            line-height: 1.625;
            color: #51545E;
            margin: .4em 0 1.1875em;">{{ caller() }}</p>
{% endmacro %}
{% macro render_button(button_text, link) %}
  <!-- Action -->
  <table class="body-action"
         align="center"
         width="100%"
         cellpadding="0"
         cellspacing="0"
         role="presentation"
         style="width: 100%;
                -premailer-width: 100%;
                -premailer-cellpadding: 0;
                -premailer-cellspacing: 0;
                text-align: center;
                margin: 30px auto;
                padding: 0;">
    <tr>
      <td align="center"
          style="word-break: break-word;
                 font-family: Helvetica, Arial, sans-serif;
                 font-size: 16px;">
        <!-- Border based button
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
        <table width="100%"
               border="0"
               cellspacing="0"
               cellpadding="0"
               role="presentation">
          <tr>
            <td align="center"
                style="word-break: break-word;
                       font-family: Helvetica, Arial, sans-serif;
                       font-size: 16px;">
              <a href="{{ link }}"
                 class="f-fallback button"
                 target="_blank"
                 rel="noopener"
                 style="color: #FFF;
                        border-color: #3869d4;
                        border-style: solid;
                        border-width: 10px 18px;
                        background-color: #3869D4;
                        display: inline-block;
                        text-decoration: none;
                        border-radius: 3px;
                        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
                        -webkit-text-size-adjust: none;
                        box-sizing: border-box;">
                {{ button_text }}
              </a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
{% endmacro %}
{% macro raw_url(link) %}
  <!-- Sub copy -->
  <table class="body-sub"
         role="presentation"
         style="margin-top: 25px;
                padding-top: 25px;
                border-top-width: 1px;
                border-top-color: #EAEAEC;
                border-top-style: solid;">
    <tr>
      <td style="word-break: break-word;
                 font-family: Helvetica, Arial, sans-serif;
                 font-size: 16px;">
        <p class="f-fallback sub"
           style="font-size: 13px;
                  line-height: 1.625;
                  color: #51545E;
                  margin: .4em 0 1.1875em;">
          If you’re having trouble with the button above, copy and paste the URL below into your web browser.
        </p>
        <p class="f-fallback sub"
           style="font-size: 13px;
                  line-height: 1.625;
                  color: #51545E;
                  margin: .4em 0 1.1875em;">
          {{ link }}
        </p>
      </td>
    </tr>
  </table>
{% endmacro %}
{% macro grey_section(parts) %}
  <table class="attributes"
         width="100%"
         cellpadding="0"
         cellspacing="0"
         role="presentation"
         style="margin: 0 0 21px;">
    <tr>
      <td class="attributes_content"
          style="word-break: break-word;
                 font-family: Helvetica, Arial, sans-serif;
                 font-size: 16px;
                 background-color: #F4F4F7;
                 padding: 16px;"
          bgcolor="#F4F4F7">
        <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
          {% for part in parts %}

            <tr>
              <td class="attributes_item"
                  style="word-break: break-word;
                         font-family: Helvetica, Arial, sans-serif;
                         font-size: 16px;
                         padding: 0;">
                <div class="f-fallback">
                  {{ part }}
                  <br />
                  <br />
                </div>
              </td>
            </tr>
          {% endfor %}
        </table>
      </td>
    </tr>
  </table>
{% endmacro %}