Developer reference
Full-width overlay hero for launches, announcements, and bold campaign intros.
Tags: hero · overlay · launch · campaign
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 structure, spacing, and CTA rendering hold up in Gmail web and mobile views. |
| Outlook Desktop (Windows) | Partial | Background-image treatment can flatten or simplify in Outlook desktop. |
| 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.
Heroes
Image-led hero with centred framing and left-aligned body copy for richer launch or announcement sends.
Heroes
Split announcement block for new features, product launches, and release highlights.
Heroes
Centred hero section with label, headline, support copy, image, and primary CTA.
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-style>
.hero-text div {
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.36);
}
</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-# Hero Banner With CTA -->
<mj-hero
mode="fluid-height"
height="380px"
background-width="1200px"
background-height="600px"
background-url="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1200&h=600&fit=crop&q=85"
background-color="#12263f"
padding="90px 34px"
>
<mj-text mj-class="label white" align="center" padding-bottom="12px">
PRODUCT UPDATE
</mj-text>
<mj-text mj-class="h2 white extrabold" align="center" padding-bottom="16px" css-class="hero-text">
Launch smarter campaigns with reusable email blocks
</mj-text>
<mj-text mj-class="body white" align="center" padding-bottom="26px" css-class="hero-text">
Build a clean email in minutes with production-ready sections your team can reuse every week.
</mj-text>
<mj-button background-color="#2f67ef" color="#ffffff" align="center" border-radius="999px" inner-padding="16px 34px" href="https://templatehedgehog.co.uk">
View update
</mj-button>
</mj-hero>
<!-- #-END-# Hero Banner With CTA -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# Hero Banner With CTA -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:600px;mso-position-horizontal:center;position:absolute;top:0;width:1200px;z-index:-3;" src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1200&h=600&fit=crop&q=85" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
<div
style="margin:0 auto;max-width:640px;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr
style="vertical-align:top;"
>
<td style="width:0.01%;padding-bottom:50%;mso-padding-bottom-alt:0;" />
<td background="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1200&h=600&fit=crop&q=85" style="background:#12263f url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1200&h=600&fit=crop&q=85') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:90px 34px;vertical-align:top;">
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:572px;" width="572" ><tr><td style=""><![endif]-->
<div
class="mj-hero-content" style="margin:0px auto;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tbody>
<tr>
<td style="" >
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<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:#ffffff;"
>PRODUCT UPDATE</div>
</td>
</tr>
<tr>
<td
align="center" class="hero-text" style="font-size:0px;padding:0 0 12px 0;padding-bottom:16px;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;"
>Launch smarter campaigns with reusable email blocks</div>
</td>
</tr>
<tr>
<td
align="center" class="hero-text" style="font-size:0px;padding:0 0 12px 0;padding-bottom:26px;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#ffffff;"
>Build a clean email in minutes with production-ready sections your team can reuse every week.</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="#2f67ef" role="presentation" style="border:none;border-radius:999px;cursor:auto;mso-padding-alt:16px 34px;background:#2f67ef;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#2f67ef;color:#ffffff;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:16px;font-weight:700;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:16px 34px;mso-padding-alt:0px;border-radius:999px;" target="_blank"
>
View update
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
<td style="width:0.01%;padding-bottom:50%;mso-padding-bottom-alt:0;" />
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- #-END-# Hero Banner With CTA -->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