Developer reference
Four-tile guidance grid with imagery, short copy, and CTA buttons for education-led emails.
Tags: tiles · guidance · grid · education
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 | Four-tile button grids hold up well, though Outlook can make the vertical rhythm feel tighter than webmail clients. |
| 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.
Product Sections
Dark two-by-two benefits grid for value propositions, purchase perks, or service selling points.
Product Sections
Responsive two-column cards for product highlights, service updates, or content picks.
Product Sections
Four-up card grid for products, resources, or editorial picks.
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">
<!-- requires styles_jp.mjml -->
<!-- #-START-# JP Tiles With Buttons 2 Col -->
<mj-wrapper mj-class="whitebg">
<mj-section padding="0 24px">
<mj-column width="50%" vertical-align="top" padding="0 8px 24px 8px">
<mj-image src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" fluid-on-mobile="true" padding="0 0 14px 0" alt="Release checklist visual" />
<mj-text mj-class="h3 medium bold" align="center" padding="0 0 8px 0">Care and maintenance</mj-text>
<mj-text mj-class="body medium" align="center" padding="0 0 14px 0">Use this card for maintenance guidance, rollout checks, or support prep before a high-volume campaign.</mj-text>
<mj-button href="https://templatehedgehog.co.uk" align="center" padding="0" border-radius="24px" inner-padding="12px 22px" background-color="#d3d3d4" color="#111111" target="_blank" font-size="13px" line-height="14px" mj-class="bold">View guide</mj-button>
</mj-column>
<mj-column width="50%" vertical-align="top" padding="0 8px 24px 8px">
<mj-image src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" fluid-on-mobile="true" padding="0 0 14px 0" alt="Accessory setup visual" />
<mj-text mj-class="h3 medium bold" align="center" padding="0 0 8px 0">Accessory setup</mj-text>
<mj-text mj-class="body medium" align="center" padding="0 0 14px 0">Pair a short setup walkthrough with a single CTA to reduce first-week support volume.</mj-text>
<mj-button href="https://templatehedgehog.co.uk" align="center" padding="0" border-radius="24px" inner-padding="12px 22px" background-color="#d3d3d4" color="#111111" target="_blank" font-size="13px" line-height="14px" mj-class="bold">View guide</mj-button>
</mj-column>
</mj-section>
<mj-section padding="0 24px">
<mj-column width="50%" vertical-align="top" padding="0 8px 24px 8px">
<mj-image src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" fluid-on-mobile="true" padding="0 0 14px 0" alt="Troubleshooting visual" />
<mj-text mj-class="h3 medium bold" align="center" padding="0 0 8px 0">Troubleshooting</mj-text>
<mj-text mj-class="body medium" align="center" padding="0 0 14px 0">Document known fixes with concise steps so customers can resolve common issues quickly.</mj-text>
<mj-button href="https://templatehedgehog.co.uk" align="center" padding="0" border-radius="24px" inner-padding="12px 22px" background-color="#d3d3d4" color="#111111" target="_blank" font-size="13px" line-height="14px" mj-class="bold">View guide</mj-button>
</mj-column>
<mj-column width="50%" vertical-align="top" padding="0 8px 24px 8px">
<mj-image src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" fluid-on-mobile="true" padding="0 0 14px 0" alt="Performance tips visual" />
<mj-text mj-class="h3 medium bold" align="center" padding="0 0 8px 0">Performance tips</mj-text>
<mj-text mj-class="body medium" align="center" padding="0 0 14px 0">Use this slot for optimisation advice that improves conversion and reduces post-send churn.</mj-text>
<mj-button href="https://templatehedgehog.co.uk" align="center" padding="0" border-radius="24px" inner-padding="12px 22px" background-color="#d3d3d4" color="#111111" target="_blank" font-size="13px" line-height="14px" mj-class="bold">View guide</mj-button>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- #-END-# JP Tiles With Buttons 2 Col -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# JP Tiles With Buttons 2 Col -->
<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: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:296px;" ><![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 8px 24px 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 14px 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:280px;" class="mj-full-width-mobile">
<img
alt="Release checklist visual" src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 8px 0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:30px;font-weight:700;line-height:34px;text-align:center;color:#4a5568;"
>Care and maintenance</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 14px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
>Use this card for maintenance guidance, rollout checks, or support prep before a high-volume campaign.</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="#d3d3d4" role="presentation" style="border:none;border-radius:24px;cursor:auto;mso-padding-alt:12px 22px;background:#d3d3d4;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#d3d3d4;color:#111111;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:13px;font-weight:700;line-height:14px;margin:0;text-decoration:none;text-transform:none;padding:12px 22px;mso-padding-alt:0px;border-radius:24px;" target="_blank"
>
View guide
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:296px;" ><![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 8px 24px 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 14px 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:280px;" class="mj-full-width-mobile">
<img
alt="Accessory setup visual" src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 8px 0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:30px;font-weight:700;line-height:34px;text-align:center;color:#4a5568;"
>Accessory setup</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 14px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
>Pair a short setup walkthrough with a single CTA to reduce first-week support volume.</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="#d3d3d4" role="presentation" style="border:none;border-radius:24px;cursor:auto;mso-padding-alt:12px 22px;background:#d3d3d4;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#d3d3d4;color:#111111;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:13px;font-weight:700;line-height:14px;margin:0;text-decoration:none;text-transform:none;padding:12px 22px;mso-padding-alt:0px;border-radius:24px;" target="_blank"
>
View guide
</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" ><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:296px;" ><![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 8px 24px 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 14px 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:280px;" class="mj-full-width-mobile">
<img
alt="Troubleshooting visual" src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 8px 0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:30px;font-weight:700;line-height:34px;text-align:center;color:#4a5568;"
>Troubleshooting</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 14px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
>Document known fixes with concise steps so customers can resolve common issues quickly.</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="#d3d3d4" role="presentation" style="border:none;border-radius:24px;cursor:auto;mso-padding-alt:12px 22px;background:#d3d3d4;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#d3d3d4;color:#111111;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:13px;font-weight:700;line-height:14px;margin:0;text-decoration:none;text-transform:none;padding:12px 22px;mso-padding-alt:0px;border-radius:24px;" target="_blank"
>
View guide
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:296px;" ><![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 8px 24px 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 14px 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:280px;" class="mj-full-width-mobile">
<img
alt="Performance tips visual" src="https://placehold.co/640x360/png?text=TemplateHedgehog+Visual" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 8px 0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:30px;font-weight:700;line-height:34px;text-align:center;color:#4a5568;"
>Performance tips</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 14px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
>Use this slot for optimisation advice that improves conversion and reduces post-send churn.</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="#d3d3d4" role="presentation" style="border:none;border-radius:24px;cursor:auto;mso-padding-alt:12px 22px;background:#d3d3d4;" valign="middle"
>
<a
href="https://templatehedgehog.co.uk" style="display:inline-block;background:#d3d3d4;color:#111111;font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:13px;font-weight:700;line-height:14px;margin:0;text-decoration:none;text-transform:none;padding:12px 22px;mso-padding-alt:0px;border-radius:24px;" target="_blank"
>
View guide
</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-# JP Tiles With Buttons 2 Col -->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