Template Hedgehog
Get Pro - £179
Open navigation

SaaS lifecycle

Trial Ending Reminder System

Trial-ending lifecycle email using an alert block, usage summary, benefits reinforcement, and support-aware close.

5 reusable blocksPart of the SaaS lifecycle systemCopyable MJML and compiled HTMLBuilt from the public production email system
Rendered email preview

What this recipe covers

Sections in sequence

  • Header. Introduces the lifecycle reminder cleanly.
  • Expiry alert. Explains what is changing and when.
  • Usage summary. Reminds the user what they have been doing in the product.
  • Benefits list. Reinforces why staying on the paid plan matters.
  • Onboarding footer. Keeps support and preference handling simple.

Implementation guidance

How developers usually use it

  • Edit the MJML recipe when you want to adjust structure, copy order, imagery, or CTA destinations.
  • Use the compiled HTML when your ESP, QA handoff, or review process needs final delivery markup.
  • Review the block order below before customising so the message hierarchy stays intact across clients.

Stack map

Component breakdown

5

Each layout is assembled from reusable blocks. You can inspect the recipe as a whole here, then drop into each component page for single-block edits.

  1. 1
    Header

    Headers

    Keeps the lifecycle message recognisable.

  2. 2
    Trial Expiry Alert

    Transactional Components

    Carries the timing and urgency message.

  3. 3
    Usage Summary Strip

    Content Blocks

    Adds context before the upgrade ask.

  4. 4
    Direct Benefits List Dark

    Product Sections

    Summarises the reasons to keep access or upgrade.

  5. 5
    Footer Onboarding Legal

    Footers

    Closes with support-safe lifecycle copy.

Layout MJML

Editable recipe source for adjusting block order, copy, imagery, and destination URLs.

<mjml>
  <mj-head>
    <mj-preview>TemplateHedgehog reusable email block</mj-preview>
    <mj-attributes>
      <mj-all font-family="'Manrope', 'Inter', Arial, sans-serif" />
      <mj-body width="640px" background-color="#f3f4f6" />
      <mj-wrapper padding="0" full-width="full-width" />
      <mj-section padding="28px 34px" />
      <mj-column padding="0" />
      <mj-image padding="0 0 14px 0" />
      <mj-text padding="0 0 12px 0" font-size="16px" line-height="28px" color="#1a1a1a" />
      <mj-button padding="0" font-size="16px" font-weight="700" border-radius="999px" inner-padding="14px 30px" />

      <mj-class name="h1" font-size="42px" line-height="46px" font-weight="800" />
      <mj-class name="h2" font-size="36px" line-height="40px" font-weight="800" />
      <mj-class name="h3" font-size="30px" line-height="34px" font-weight="800" />
      <mj-class name="h4" font-size="26px" line-height="30px" font-weight="800" />
      <mj-class name="h5" font-size="22px" line-height="26px" font-weight="800" />
      <mj-class name="h6" font-size="20px" line-height="24px" font-weight="800" />
      <mj-class name="h1-display" font-size="56px" line-height="60px" font-weight="800" />
      <mj-class name="body" font-family="'Inter', Arial, sans-serif" font-size="17px" line-height="28px" />
      <mj-class name="small" font-family="'Inter', Arial, sans-serif" font-size="14px" line-height="23px" />
      <mj-class name="label" font-family="'Inter', Arial, sans-serif" font-size="12px" font-weight="700" text-transform="uppercase" letter-spacing="0.12em" />
      <mj-class name="bold" font-weight="700" />
      <mj-class name="extrabold" font-weight="800" />
      <mj-class name="white" color="#ffffff" />
      <mj-class name="light" color="#94a3b8" />
      <mj-class name="medium" color="#4a5568" />
      <mj-class name="dark" color="#1a1a1a" />
      <mj-class name="text-primary" color="#1a1a1a" />
      <mj-class name="text-muted" color="#4a5568" />
      <mj-class name="thblue" color="#2f67ef" />
      <mj-class name="whitebg" background-color="#ffffff" />
      <mj-class name="superlightbg" background-color="#f8fafc" />
      <mj-class name="thbluebg" background-color="#2f67ef" />
      <mj-class name="blackbg" background-color="#0f172a" />
      <mj-class name="darkbg" background-color="#102447" />
      <mj-class name="rocketbluebg" background-color="#183b7a" />
      <mj-class name="e3bluebg" background-color="#183b7a" />
      <mj-class name="transbg" background-color="transparent" />
      <mj-class name="badge" font-family="'Inter', Arial, sans-serif" font-size="12px" line-height="16px" font-weight="700" letter-spacing="0.12em" text-transform="uppercase" />
      <mj-class name="button" font-weight="700" />
    </mj-attributes>
    <mj-style>
      .border-top-light { border-top: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .border-bottom-light { border-bottom: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .grayscale img { filter: grayscale(100%); }
    </mj-style>
    
    <mj-raw>
      <meta name="color-scheme" content="light dark" />
      <meta name="supported-color-schemes" content="light dark" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    </mj-raw>
  </mj-head>
  <mj-body background-color="#f3f4f6">
<!-- #-START-# Header -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding="25px 35px">
    <mj-column vertical-align="middle">
      <mj-text mj-class="h6 text-primary extrabold" align="left" padding-bottom="0">TemplateHedgehog weekly build brief</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding="0 35px 20px">
    <mj-column>
      <mj-text mj-class="small text-muted" align="left" padding-bottom="0">Prepared for product, lifecycle, and delivery teams shipping campaigns this week.</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Header -->

<!-- #-START-# Lifecycle Trial Expiry Alert -->
<mj-wrapper mj-class="whitebg">
  <mj-section background-color="#eef4ff" border-left="4px solid #2f67ef" padding="25px 35px">
    <mj-column width="100%">
      <mj-text mj-class="label thblue" align="left" padding-bottom="8px">Trial update</mj-text>
      <mj-text mj-class="h5 text-primary extrabold" align="left" padding-bottom="8px">Your trial is ending soon</mj-text>
      <mj-text mj-class="small text-muted" align="left" padding-bottom="16px">Your trial ends in 3 days. Choose a plan now to keep projects, automations, and team access active.</mj-text>
      <mj-button mj-class="thbluebg white body bold" align="left" border-radius="999px" inner-padding="14px 28px" href="https://templatehedgehog.co.uk">Choose plan</mj-button>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Lifecycle Trial Expiry Alert -->

<!-- #-START-# Lifecycle Usage Summary -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-bottom="18px">
    <mj-column width="520px">
      <mj-text mj-class="label thblue" align="center" padding-bottom="10px">Usage summary</mj-text>
      <mj-text mj-class="h4 text-primary extrabold" align="center" padding-bottom="10px">Lifecycle activity this week</mj-text>
      <mj-text mj-class="body text-muted" align="center">A simple snapshot for activation, retention, and billing automation performance.</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0">
    <mj-column width="33.33%" padding="0 8px">
      <mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">18</mj-text>
      <mj-text mj-class="small text-muted" align="center">Journeys live</mj-text>
    </mj-column>
    <mj-column width="33.33%" padding="0 8px">
      <mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">42k</mj-text>
      <mj-text mj-class="small text-muted" align="center">Emails sent</mj-text>
    </mj-column>
    <mj-column width="33.33%" padding="0 8px">
      <mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">97.8%</mj-text>
      <mj-text mj-class="small text-muted" align="center">Inbox placement</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Lifecycle Usage Summary -->

<!-- #-START-# buy direct left dark -->
<mj-wrapper mj-class="darkbg" padding-bottom="10px">
  <mj-section>
    <mj-column>
      <mj-text mj-class="h2 white" align="center">More benefits when you buy directly from TemplateHedgehog</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0">
    <mj-group>
      <mj-column>
        <mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
          <mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="promise" mj-class="body white" color="white" padding="0 20px 0 0">
            TemplateHedgehog Price Promise, with 35&#8208;day money&#8208;back guarantee
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-group>
    <mj-group>
      <mj-column>
        <mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
          <mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="delivery" mj-class="body white" color="white" padding="0 20px 0 0">
            Free next&#8208;day delivery and free returns
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-group>
  </mj-section>
  <mj-section padding-top="0">
    <mj-group>
      <mj-column>
        <mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
          <mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="guarantee" mj-class="body white" color="white" padding="0 20px 0 0">
            2&#8208;year guarantee, activated automatically
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-group>
    <mj-group>
      <mj-column>
        <mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
          <mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="pay-monthly" mj-class="body white" color="white" padding="0 20px 0 0">
            Monthly payments to spread the cost
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-group>
  </mj-section>
</mj-wrapper>
<!-- #-END-# buy direct left dark -->

<!-- #-START-# footer onboarding -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-top="25px">
    <mj-group>
      <mj-column width="30%" padding="0 0 0 15px">
        <mj-image src="/brand/hedgehog-mark-email.png" width="28px" alt="TemplateHedgehog icon" align="left" href="https://templatehedgehog.co.uk" target="_blank" padding="0" />
        <mj-text align="left" padding="6px 0 0 0" font-family="'Manrope', 'Inter', Arial, sans-serif" font-size="12px" font-weight="700" color="#1a1a1a">
          <a href="https://templatehedgehog.co.uk" style="color:#1a1a1a; text-decoration:none;">TemplateHedgehog</a>
        </mj-text>
      </mj-column>
      <mj-column width="70%" padding="0 15px 0 0">
        <mj-text mj-class="small light" align="right" padding-top="3px"><a href="https://templatehedgehog.co.uk" style="color:#999999; text-decoration: underline;">Privacy policy</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://templatehedgehog.co.uk" style="color:#999999; text-decoration: underline;">Manage preferences</a></mj-text>
      </mj-column>
    </mj-group>
  </mj-section>
  <mj-section padding-top="3px">
    <mj-column>
      <mj-divider />
    </mj-column>
  </mj-section>
  <mj-section padding-top="0" padding-bottom="40px">
    <mj-column>
      <mj-text mj-class="small light">Add our sender address to your safe-sender list so onboarding updates continue to arrive reliably.</mj-text>
      <mj-text mj-class="small light">You are receiving this email because your workspace notifications are enabled. Update your preferences anytime at <a style="color:#666666; text-decoration:underline;" target="_blank" href="https://templatehedgehog.co.uk/preferences">templatehedgehog.co.uk/preferences</a>.</mj-text>
      <mj-text mj-class="small light">Artifexa. Example House, London, WC2N 5DU.</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# footer onboarding -->
  </mj-body>
</mjml>

Compiled HTML

Final output for ESP handoff, QA review, and HTML-only delivery workflows.

<!doctype html>
<html lang="und" dir="auto" 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>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #outlook a { padding:0; }
      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
      p { display:block;margin:13px 0; }
    </style>
    <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
    <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { width:100% !important; }
    </style>
    <![endif]-->
    
    
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-px-520 { width:520px !important; max-width: 520px; }
.mj-column-per-33-33 { width:33.33% !important; max-width: 33.33%; }
.mj-column-per-50 { width:50% !important; max-width: 50%; }
.mj-column-per-30 { width:30% !important; max-width: 30%; }
.mj-column-per-70 { width:70% !important; max-width: 70%; }
      }
    </style>
    <style media="screen and (min-width:480px)">
      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-px-520 { width:520px !important; max-width: 520px; }
.moz-text-html .mj-column-per-33-33 { width:33.33% !important; max-width: 33.33%; }
.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }
.moz-text-html .mj-column-per-30 { width:30% !important; max-width: 30%; }
.moz-text-html .mj-column-per-70 { width:70% !important; max-width: 70%; }
    </style>
    
    
  
    
    <style type="text/css">

    @media only screen and (max-width:479px) {
      table.mj-full-width-mobile { width: 100% !important; }
      td.mj-full-width-mobile { width: auto !important; }
    }
  
    </style>
     
    <style type="text/css">
.border-top-light { border-top: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .border-bottom-light { border-bottom: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .grayscale img { filter: grayscale(100%); }
    </style>
    <meta name="color-scheme" content="light dark" />
      <meta name="supported-color-schemes" content="light dark" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  </head>
  
      <body  style="word-spacing:normal;background-color:#f3f4f6;">
        
    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">TemplateHedgehog reusable email block</div>
  
        <div
           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#f3f4f6;"
        >
        <!-- #-START-# Header -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:25px 35px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:middle;width:570px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:middle;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:20px;font-weight:800;line-height:24px;text-align:left;color:#1a1a1a;"
      >TemplateHedgehog weekly build brief</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0 35px 20px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:570px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
      >Prepared for product, lifecycle, and delivery teams shipping campaigns this week.</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# Header --><!-- #-START-# Lifecycle Trial Expiry Alert -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#eef4ff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="background:#eef4ff;background-color:#eef4ff;margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#eef4ff;background-color:#eef4ff;width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="border-left:4px solid #2f67ef;direction:ltr;font-size:0px;padding:25px 35px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:566px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:8px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:12px;font-weight:700;letter-spacing:0.12em;line-height:28px;text-align:left;text-transform:uppercase;color:#2f67ef;"
      >Trial update</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:8px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:22px;font-weight:800;line-height:26px;text-align:left;color:#1a1a1a;"
      >Your trial is ending soon</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:16px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
      >Your trial ends in 3 days. Choose a plan now to keep projects, automations, and team access active.</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
      >
        <tbody>
          <tr>
            <td
               align="center" bgcolor="#2f67ef" role="presentation" style="border:none;border-radius:999px;cursor:auto;mso-padding-alt:14px 28px;background:#2f67ef;" valign="middle"
            >
              <a
                 href="https://templatehedgehog.co.uk" style="display:inline-block;background:#2f67ef;color:#ffffff;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:14px 28px;mso-padding-alt:0px;border-radius:999px;" target="_blank"
              >
                Choose plan
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# Lifecycle Trial Expiry Alert --><!-- #-START-# Lifecycle Usage Summary -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-bottom:18px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:520px;" ><![endif]-->
            
      <div
         class="mj-column-px-520 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:10px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:12px;font-weight:700;letter-spacing:0.12em;line-height:28px;text-align:center;text-transform:uppercase;color:#2f67ef;"
      >Usage summary</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:10px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:26px;font-weight:800;line-height:30px;text-align:center;color:#1a1a1a;"
      >Lifecycle activity this week</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
      >A simple snapshot for activation, retention, and billing automation performance.</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:190.64759999999998px;" ><![endif]-->
            
      <div
         class="mj-column-per-33-33 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0 8px;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:22px;font-weight:800;line-height:26px;text-align:center;color:#2f67ef;"
      >18</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >Journeys live</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:190.64759999999998px;" ><![endif]-->
            
      <div
         class="mj-column-per-33-33 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0 8px;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:22px;font-weight:800;line-height:26px;text-align:center;color:#2f67ef;"
      >42k</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >Emails sent</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:190.64759999999998px;" ><![endif]-->
            
      <div
         class="mj-column-per-33-33 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0 8px;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:22px;font-weight:800;line-height:26px;text-align:center;color:#2f67ef;"
      >97.8%</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >Inbox placement</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# Lifecycle Usage Summary --><!-- #-START-# buy direct left dark -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#102447;background-color:#102447;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#102447" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;padding-bottom:10px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:572px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:36px;font-weight:800;line-height:40px;text-align:center;color:#ffffff;"
      >More benefits when you buy directly from TemplateHedgehog</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
      >
        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![endif]-->
                
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
                >
                  
      
     <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
              <table
                 align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:0 20px 0 0;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:48px;vertical-align:middle;width:48px;">
                  
                    <img
                       alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
                    />
                  
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
            <span
                     style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
              TemplateHedgehog Price Promise, with 35&#8208;day money&#8208;back guarantee
            </span>
          </td>
          
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td></tr></table><![endif]-->
    
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td></tr></table><![endif]-->
      </div>
    
          <!--[if mso | IE]></td><td class="" style="width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
      >
        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![endif]-->
                
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
                >
                  
      
     <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
              <table
                 align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:0 20px 0 0;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:48px;vertical-align:middle;width:48px;">
                  
                    <img
                       alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
                    />
                  
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
            <span
                     style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
              Free next&#8208;day delivery and free returns
            </span>
          </td>
          
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td></tr></table><![endif]-->
    
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td></tr></table><![endif]-->
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
      >
        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![endif]-->
                
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
                >
                  
      
     <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
              <table
                 align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:0 20px 0 0;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:48px;vertical-align:middle;width:48px;">
                  
                    <img
                       alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
                    />
                  
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
            <span
                     style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
              2&#8208;year guarantee, activated automatically
            </span>
          </td>
          
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td></tr></table><![endif]-->
    
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td></tr></table><![endif]-->
      </div>
    
          <!--[if mso | IE]></td><td class="" style="width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
      >
        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![endif]-->
                
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
                >
                  
      
     <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
              <table
                 align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:0 20px 0 0;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:48px;vertical-align:middle;width:48px;">
                  
                    <img
                       alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
                    />
                  
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
            <span
                     style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
              Monthly payments to spread the cost
            </span>
          </td>
          
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td></tr></table><![endif]-->
    
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td></tr></table><![endif]-->
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# buy direct left dark --><!-- #-START-# footer onboarding -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:25px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:572px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
      >
        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:171px;" ><![endif]-->
                
      <div
         class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:30%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0 0 0 15px;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
      >
        <tbody>
          <tr>
            <td  style="width:28px;">
              
        <a
           href="https://templatehedgehog.co.uk" target="_blank"
        >
          
      <img
         alt="TemplateHedgehog icon" src="/brand/hedgehog-mark-email.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="28" height="auto"
      />
    
        </a>
      
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:6px 0 0 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:12px;font-weight:700;line-height:28px;text-align:left;color:#1a1a1a;"
      ><a href="https://templatehedgehog.co.uk" style="color:#1a1a1a; text-decoration:none;">TemplateHedgehog</a></div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td><td style="vertical-align:top;width:400px;" ><![endif]-->
                
      <div
         class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:70%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0 15px 0 0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="right" style="font-size:0px;padding:0 0 12px 0;padding-top:3px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:right;color:#94a3b8;"
      ><a href="https://templatehedgehog.co.uk" style="color:#999999; text-decoration: underline;">Privacy policy</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://templatehedgehog.co.uk" style="color:#999999; text-decoration: underline;">Manage preferences</a></div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
              <!--[if mso | IE]></td></tr></table><![endif]-->
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:3px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:572px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
                >
                  
      <p
         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"
      >
      </p>
      
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:522px;" role="presentation" width="522px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
    
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-bottom:40px;padding-top:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:572px;" ><![endif]-->
            
      <div
         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#94a3b8;"
      >Add our sender address to your safe-sender list so onboarding updates continue to arrive reliably.</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#94a3b8;"
      >You are receiving this email because your workspace notifications are enabled. Update your preferences anytime at <a style="color:#666666; text-decoration:underline;" target="_blank" href="https://templatehedgehog.co.uk/preferences">templatehedgehog.co.uk/preferences</a>.</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#94a3b8;"
      >Artifexa. Example House, London, WC2N 5DU.</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# footer onboarding -->
      </div>
      </body>
    
</html>

Layout system

Use layouts as reference architecture, then edit the underlying blocks

These public layout pages exist to show message order, block stacking, and the relationship between a full email and the underlying component system. Template Hedgehog Pro is there when your team wants the complete archive locally for faster assembly and handoff.

Get Pro - £179Read docs

This page helps you

  • See the full compiled email before editing
  • Understand which component blocks form the stack
  • Move from recipe-level structure to block-level customisation cleanly