Developer reference
Footer-style closing block with dual brand marks, support CTA, and compact legal line.
Tags: footer · cta · support · closing
Rendering screenshot
Preview frame reflects current component rendering and real spacing proportions for production email QA.
Live preview
This preview is rendered from compiled HTML output so you can inspect the actual email structure, not a static mock-up.
Client support
Rendering support notes across major email clients.
| Client | Status | Notes |
|---|---|---|
| Gmail (Web + Mobile) | Tested | Primary spacing, stack order, and CTA rendering stay stable in Gmail web and mobile views. |
| Outlook Desktop (Windows) | Partial | Logo-and-CTA footer rows render reliably, though Outlook can tighten the space between the stacked footer sections. |
| Apple Mail (macOS + iOS) | Tested | No additional notes. |
| Yahoo Mail | Tested | No additional notes. |
Related blocks
These components are closely related by category or usage pattern and are useful when assembling a full email flow.
Footers
Support details plus preference and unsubscribe links for compliant email endings.
Footers
Onboarding-specific footer with preference language tailored to support and activation messaging.
Footers
Light regulatory footer for app or support sends that need policy and legal copy without store links.
Source code
The source and compiled HTML shown below map directly to the rendered preview above. This keeps preview, MJML, and HTML handoff output aligned.
Snippet assembly: place this block inside the same <mj-body> as your other snippets, then stack sections in send order.
Component block only. Use this when assembling an email from multiple reusable sections inside a project that already includes the shared MJML classes.
<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">
<mj-wrapper>
<mj-section mj-class="e3bluebg">
<mj-column width="50%">
<mj-image src="/brand/hedgehog-mark-email.png" width="44px" padding="0 0 8px 0" alt="TemplateHedgehog icon"></mj-image>
<mj-text align="center" font-family="'Manrope', 'Inter', Arial, sans-serif" font-size="16px" font-weight="700" color="#ffffff" padding="0">
<a href="https://templatehedgehog.co.uk" style="color:#ffffff; text-decoration:none;">TemplateHedgehog</a>
</mj-text>
</mj-column>
<mj-column width="50%">
<mj-image src="/brand/hedgehog-mark-email.png" width="32px" padding="0 0 8px 0" alt="Support icon"></mj-image>
<mj-text align="center" font-family="'Manrope', 'Inter', Arial, sans-serif" font-size="14px" font-weight="600" color="#ffffff" padding="0">
Support team
</mj-text>
</mj-column>
</mj-section>
<mj-section mj-class="e3bluebg" padding-top="0">
<mj-column>
<mj-text mj-class="h3 white" align="center">Need a second pair of eyes before send? Reach the support team for implementation help and delivery guidance.</mj-text>
<mj-button align="center" background-color="#ffffff" color="#005296" inner-padding="15px 26px 15px 26px" text-decoration="none" text-transform="uppercase" target="_blank" href="https://templatehedgehog.co.uk" font-size="12px" border-radius="3px" mj-class="bold">Contact support</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="#0c68b4">
<mj-column>
<mj-text mj-class="body white" align="center">Artifexa. Example House, London, WC2N 5DU.</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>Component-only compiled markup for block-level inspection and HTML assembly workflows.
<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;"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="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" ><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="#183b7a" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#183b7a;background-color:#183b7a;margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#183b7a;background-color:#183b7a;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:286px;" ><![endif]-->
<div
class="mj-column-per-50 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 8px 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:44px;">
<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="44" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding: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:#ffffff;"
><a href="https://templatehedgehog.co.uk" style="color:#ffffff; text-decoration:none;">TemplateHedgehog</a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:286px;" ><![endif]-->
<div
class="mj-column-per-50 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 8px 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:32px;">
<img
alt="Support 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="32" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:14px;font-weight:600;line-height:28px;text-align:center;color:#ffffff;"
>Support team</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" bgcolor="#183b7a" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#183b7a;background-color:#183b7a;margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#183b7a;background-color:#183b7a;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="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:30px;font-weight:800;line-height:34px;text-align:center;color:#ffffff;"
>Need a second pair of eyes before send? Reach the support team for implementation help and delivery guidance.</div>
</td>
</tr>
<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:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:15px 26px 15px 26px;background:#ffffff;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#ffffff;color:#005296;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:12px;font-weight:700;line-height:120%;margin:0;text-decoration:none;text-transform:uppercase;padding:15px 26px 15px 26px;mso-padding-alt:0px;border-radius:3px;" target="_blank"
>
Contact support
</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><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#0c68b4" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#0c68b4;background-color:#0c68b4;margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#0c68b4;background-color:#0c68b4;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:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#ffffff;"
>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>
</div>Full library
Public component pages are there for reference and one-off use. Template Hedgehog Pro is for teams that want the full archive, local source files, compiled HTML, and a quicker implementation handoff.
Why teams upgrade