Developer reference
Compact metrics strip for activation, retention, and weekly product update emails.
Tags: usage · metrics · lifecycle · summary
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 | Simple metric columns are stable, with predictable Outlook stacking behaviour. |
| Apple Mail (macOS + iOS) | Tested | No additional notes. |
| Yahoo Mail | Tested | No additional notes. |
Used in layouts
These layout pages include this component in context, with block order, message structure, and QA guidance alongside the rendered email.
Related blocks
These components are closely related by category or usage pattern and are useful when assembling a full email flow.
Content Blocks
Three-column metrics block for product proof, launch stats, or engineering credibility moments.
Content Blocks
Compact app-download section with platform badges for onboarding, support, and activation emails.
Content Blocks
Edge-to-edge split section combining feature copy with app download routes.
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">
<!-- #-START-# Lifecycle Usage 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="10px">Usage summary</mj-text>
<mj-text mj-class="h4 text-primary extrabold" align="center" padding-bottom="10px">Lifecycle activity this week</mj-text>
<mj-text mj-class="body text-muted" align="center">A simple snapshot for activation, retention, and billing automation performance.</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0">
<mj-column width="33.33%" padding="0 8px">
<mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">18</mj-text>
<mj-text mj-class="small text-muted" align="center">Journeys live</mj-text>
</mj-column>
<mj-column width="33.33%" padding="0 8px">
<mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">42k</mj-text>
<mj-text mj-class="small text-muted" align="center">Emails sent</mj-text>
</mj-column>
<mj-column width="33.33%" padding="0 8px">
<mj-text mj-class="h5 thblue extrabold" align="center" padding-bottom="4px">97.8%</mj-text>
<mj-text mj-class="small text-muted" align="center">Inbox placement</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- #-END-# Lifecycle Usage Summary -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# Lifecycle Usage 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:10px;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;"
>Usage summary</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:26px;font-weight:800;line-height:30px;text-align:center;color:#1a1a1a;"
>Lifecycle activity this week</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;"
>A simple snapshot for activation, retention, and billing automation performance.</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:190.64759999999998px;" ><![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;">
<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:4px;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:#2f67ef;"
>18</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:14px;line-height:23px;text-align:center;color:#4a5568;"
>Journeys live</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:190.64759999999998px;" ><![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;">
<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:4px;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:#2f67ef;"
>42k</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:14px;line-height:23px;text-align:center;color:#4a5568;"
>Emails sent</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:190.64759999999998px;" ><![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;">
<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:4px;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:#2f67ef;"
>97.8%</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:14px;line-height:23px;text-align:center;color:#4a5568;"
>Inbox placement</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-# Lifecycle Usage Summary -->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