Developer reference

Hero Centred

Centred hero section with label, headline, support copy, image, and primary CTA.

Heroes blockProduction documentation pageSource file: hero-centred.mjmlCopyable MJML and compiled HTML

All components See layouts Get Pro - £179

Tags: hero · centred · cta · marketing

Rendering screenshot

Preview frame reflects current component rendering and real spacing proportions for production email QA.

Live preview

Rendered component preview

This preview is rendered from compiled HTML output so you can inspect the actual email structure, not a static mock-up.

Rendered email preview

Usage guidance

When to use this block

Use for launch, announcement, and single-message campaigns where one clear CTA should dominate.
Keep the headline tight so Outlook line wrapping stays controlled.
Replace the placeholder image with an absolute HTTPS asset before handing off compiled HTML.

Developer notes

Edit MJML, ship HTML

Use MJML as the editable source of truth. The compiled HTML panel is included for ESP handoff, QA, or integration points that only accept raw HTML.

Also included in Template Hedgehog Pro for teams that want the full component archive offline.
Source file name: hero-centred.mjml
4 client notes currently documented for this block.

Accessibility

Accessibility notes

Use a descriptive heading hierarchy so the first headline still makes sense out of visual context.
Make sure the hero image alt text adds meaning rather than repeating the headline.

Rendering notes

Client-specific guidance

Gmail (Web + Mobile): Hero text, CTA, and spacing render as expected.
Outlook Desktop (Windows): Background treatment can flatten in legacy Word rendering.
Yahoo Mail: Pending full visual regression pass.

Client support

Compatibility

4 clients

Rendering support notes across major email clients.

Hero Centred compatibility matrix
Client	Status	Notes
Gmail (Web + Mobile)	Tested	Hero text, CTA, and spacing render as expected.
Outlook Desktop (Windows)	Partial	Background treatment can flatten in legacy Word rendering.
Apple Mail (macOS + iOS)	Tested	No additional notes.
Yahoo Mail	Unknown	Pending full visual regression pass.

Used in layouts

Where this block appears in production layout systems

These layout pages include this component in context, with block order, message structure, and QA guidance alongside the rendered email.

Product Launch Campaign
Campaign launch
Launch a campaign send from a stable layout that keeps offer hierarchy and CTA placement consistent.

Related blocks

Continue building

These components are closely related by category or usage pattern and are useful when assembling a full email flow.

Heroes

Hero Image Left

Split hero with image on the left and message stack on the right.

Heroes

Hero Image Right

Split hero with message stack on the left and image support on the right.

Heroes

Feature Announcement Split

Split announcement block for new features, product launches, and release highlights.

Source code

Copy the code you need

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.

MJML snippet

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">
<!-- #-START-# Hero Centred -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding="50px 40px 30px 40px">
    <mj-column width="550px">
      <mj-text mj-class="label text-muted" align="center" padding-bottom="15px">Release bulletin</mj-text>
      <mj-text mj-class="h1 text-primary extrabold" align="center" padding-bottom="18px">
        Launch email updates with <span style="color: #2f67ef;">cleaner source</span>
      </mj-text>
      <mj-text mj-class="body text-muted" align="center" padding-bottom="0">
        Build campaign and lifecycle sends from reusable MJML blocks, then compile once for QA and ESP handoff.
      </mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding="0">
    <mj-column padding="0">
      <mj-image src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1280&h=640&fit=crop&q=85" padding="0" fluid-on-mobile="true" alt="Campaign dashboard with delivery and conversion metrics" />
    </mj-column>
  </mj-section>
  <mj-section padding="30px 40px 40px 40px">
    <mj-column width="500px">
      <mj-text mj-class="body text-muted" align="center" padding-bottom="25px">
        Keep changes in MJML while teams iterate, then ship compiled HTML that survives real client rendering.
      </mj-text>
      <mj-button background-color="#2f67ef" color="#ffffff" align="center" border-radius="50px" inner-padding="18px 45px" href="https://templatehedgehog.co.uk" target="_blank">
        Explore components
      </mj-button>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Hero Centred -->

Compiled HTML snippet

Component-only compiled markup for block-level inspection and HTML assembly workflows.

<!-- #-START-# Hero Centred -->
      <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:50px 40px 30px 40px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:550px;" ><![endif]-->
            
      <div
         class="mj-column-px-550 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:15px;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:#4a5568;"
      >Release bulletin</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:18px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:42px;font-weight:800;line-height:46px;text-align:center;color:#1a1a1a;"
      >Launch email updates with <span style="color: #2f67ef;">cleaner source</span></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:17px;line-height:28px;text-align:center;color:#4a5568;"
      >Build campaign and lifecycle sends from reusable MJML blocks, then compile once for QA and ESP handoff.</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;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:640px;" ><![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;" class="mj-full-width-mobile"
      >
        <tbody>
          <tr>
            <td  style="width:640px;" class="mj-full-width-mobile">
              
      <img
         alt="Campaign dashboard with delivery and conversion metrics" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1280&h=640&fit=crop&q=85" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="640" height="auto"
      />
    
            </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" ><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:30px 40px 40px 40px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:500px;" ><![endif]-->
            
      <div
         class="mj-column-px-500 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:25px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
      >Keep changes in MJML while teams iterate, then ship compiled HTML that survives real client rendering.</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:50px;cursor:auto;mso-padding-alt:18px 45px;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:18px 45px;mso-padding-alt:0px;border-radius:50px;" target="_blank"
              >
                Explore components
              </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-# Hero Centred -->

Full library

Need the entire system available offline

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.

Get Pro - £179 Read docs

Why teams upgrade

Stop collecting blocks one page at a time
Keep the full MJML and compiled HTML archive locally
Speed up implementation, review, and delivery across projects

Hero Centred

Rendered component preview

Compatibility

Where this block appears in production layout systems

Campaign launch

Continue building

Hero Image Left

Hero Image Right

Feature Announcement Split

Copy the code you need

MJML snippet

Compiled HTML snippet

Need the entire system available offline