Template Hedgehog
Get Pro - £179
Open navigation

Transactional

Order Confirmation System

Order confirmation email combining a transaction summary, a small cross-sell row, and a legal close.

4 reusable blocksPart of the Transactional systemCopyable MJML and compiled HTMLBuilt from the public production email system
Rendered email preview

What this recipe covers

Sections in sequence

  • Centred header. Introduces the transaction in a stable, neutral frame.
  • Order summary. Confirms what was purchased and the state of the order.
  • Related products. Adds a modest follow-on recommendation block.
  • Transactional footer. Provides policy and preference controls.

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

4

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 Centred

    Headers

    Keeps the transaction header neutral and stable.

  2. 2
    Order Confirmation Summary

    Transactional Components

    Carries the primary order information.

  3. 3
    Related Products Row

    Product Sections

    Adds a restrained recommendation layer after the core transaction content.

  4. 4
    Footer Privacy Light

    Footers

    Closes with a lighter regulatory footer.

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 Centered -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding="20px">
    <mj-column>
      <mj-image src="/brand/hedgehog-mark-email.png" width="48px" padding="0" align="center" href="https://templatehedgehog.co.uk" alt="TemplateHedgehog icon" />
      <mj-text align="center" padding="8px 0 0 0" font-family="'Manrope', 'Inter', Arial, sans-serif" font-size="16px" font-weight="700" color="#1a1a1a">
        <a href="https://templatehedgehog.co.uk" style="color:#1a1a1a; text-decoration:none;">TemplateHedgehog</a>
      </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Header Centered -->

<!-- #-START-# Order Confirmation 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="12px">Order confirmed</mj-text>
      <mj-text mj-class="h3 text-primary extrabold" align="center" padding-bottom="10px">Your order is confirmed</mj-text>
      <mj-text mj-class="body text-muted" align="center">Thanks for your purchase. A dispatch update will be sent as soon as your items leave the warehouse.</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0">
    <mj-column>
      <mj-table>
        <tr><td style="padding: 10px 0; font-weight: 700; color: #1a1a1a;">Order number</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">#10482</td></tr>
        <tr><td style="padding: 10px 0; color: #4a5568;">Items</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">2</td></tr>
        <tr><td style="padding: 10px 0; color: #4a5568;">Estimated dispatch</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">1-2 days</td></tr>
        <tr><td style="padding: 12px 0 0; font-weight: 700; color: #1a1a1a; border-top: 1px solid #dbe5f1;">Total</td><td style="padding: 12px 0 0; text-align: right; font-weight: 700; color: #1a1a1a; border-top: 1px solid #dbe5f1;">GBP 240.00</td></tr>
      </mj-table>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Order Confirmation Summary -->

<!-- #-START-# Related Products Row -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-bottom="16px">
    <mj-column>
      <mj-text mj-class="h5 text-primary extrabold" align="center" padding-bottom="8px">Recommended add-ons</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding-bottom="0">Use this row for accessory upsell, renewal extras, or post-purchase guidance.</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding="0 24px">
    <mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=320&h=320&fit=crop&q=85" fluid-on-mobile="true" alt="Docking stand" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 4px 0">Docking stand</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">GBP 45.00</mj-text>
    </mj-column>
    <mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=320&h=320&fit=crop&q=85" fluid-on-mobile="true" alt="Filter kit" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 4px 0">Filter kit</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">GBP 29.00</mj-text>
    </mj-column>
    <mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=320&h=320&fit=crop&q=85" fluid-on-mobile="true" alt="Extended care plan" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 4px 0">Care plan</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">GBP 79.00</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Related Products Row -->

<!-- START footer nostores -->
<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" target="_blank" style="color:#999999; text-decoration: underline;">Privacy policy</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://templatehedgehog.co.uk" target="_blank" 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 your sender address to the safe-sender list so future updates arrive cleanly. If you’d prefer not to receive emails from us, please <a style="color:#666666; text-decoration:underline;" target="_blank" href="https://templatehedgehog.co.uk/preferences">click here</a> to manage your preferences.</mj-text>
      <mj-text mj-class="small light">Replace app availability and platform eligibility copy with your own production policy.</mj-text>
      <mj-text mj-class="small light">Use your own legal and compliance copy before production send.</mj-text>
      <mj-text mj-class="small light">Artifexa. Example House, London, WC2N 5DU.</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- END footer nostores -->
  </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-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-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 Centered -->
      <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:20px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![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;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:48px;">
              
        <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="48" height="auto"
      />
    
        </a>
      
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:8px 0 0 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:16px;font-weight:700;line-height:28px;text-align:center;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></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 Centered --><!-- #-START-# Order Confirmation 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:12px;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;"
      >Order confirmed</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:30px;font-weight:800;line-height:34px;text-align:center;color:#1a1a1a;"
      >Your order is confirmed</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;"
      >Thanks for your purchase. A dispatch update will be sent as soon as your items leave the warehouse.</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: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:10px 25px;word-break:break-word;"
                >
                  
      <table
         cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;"
      >
        <tr><td style="padding: 10px 0; font-weight: 700; color: #1a1a1a;">Order number</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">#10482</td></tr>
        <tr><td style="padding: 10px 0; color: #4a5568;">Items</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">2</td></tr>
        <tr><td style="padding: 10px 0; color: #4a5568;">Estimated dispatch</td><td style="padding: 10px 0; text-align: right; color: #4a5568;">1-2 days</td></tr>
        <tr><td style="padding: 12px 0 0; font-weight: 700; color: #1a1a1a; border-top: 1px solid #dbe5f1;">Total</td><td style="padding: 12px 0 0; text-align: right; font-weight: 700; color: #1a1a1a; border-top: 1px solid #dbe5f1;">GBP 240.00</td></tr>
      </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-# Order Confirmation Summary --><!-- #-START-# Related Products Row -->
      <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:16px;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;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:center;color:#1a1a1a;"
      >Recommended add-ons</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" 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:center;color:#4a5568;"
      >Use this row for accessory upsell, renewal extras, or post-purchase guidance.</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 24px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 0;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile"
      >
        <tbody>
          <tr>
            <td  style="width:181px;" class="mj-full-width-mobile">
              
      <img
         alt="Docking stand" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=320&h=320&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Docking stand</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >GBP 45.00</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 0;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile"
      >
        <tbody>
          <tr>
            <td  style="width:181px;" class="mj-full-width-mobile">
              
      <img
         alt="Filter kit" src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=320&h=320&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Filter kit</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >GBP 29.00</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 0;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile"
      >
        <tbody>
          <tr>
            <td  style="width:181px;" class="mj-full-width-mobile">
              
      <img
         alt="Extended care plan" src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=320&h=320&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Care plan</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >GBP 79.00</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-# Related Products Row --><!-- START footer nostores -->
      <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" target="_blank" style="color:#999999; text-decoration: underline;">Privacy policy</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://templatehedgehog.co.uk" target="_blank" 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 your sender address to the safe-sender list so future updates arrive cleanly. If you’d prefer not to receive emails from us, please <a style="color:#666666; text-decoration:underline;" target="_blank" href="https://templatehedgehog.co.uk/preferences">click here</a> to manage your preferences.</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;"
      >Replace app availability and platform eligibility copy with your own production policy.</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;"
      >Use your own legal and compliance copy before production send.</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 nostores -->
      </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