Developer reference
Left-aligned dark benefits list for more narrative purchase-value messaging.
Tags: benefits · list · dark · value
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 | Icon-and-text benefit lists render well, though Outlook can tighten the spacing between social-style rows. |
| 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.
Product Sections
Dark two-by-two benefits grid for value propositions, purchase perks, or service selling points.
Product Sections
Cart recovery block for browse abandonment, incomplete checkout, and return-to-cart campaigns.
Product Sections
High-contrast promo banner for discount pushes, limited offers, and short-term campaign incentives.
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-# buy direct left dark -->
<mj-wrapper mj-class="darkbg" padding-bottom="10px">
<mj-section>
<mj-column>
<mj-text mj-class="h2 white" align="center">More benefits when you buy directly from TemplateHedgehog</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0">
<mj-group>
<mj-column>
<mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
<mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="promise" mj-class="body white" color="white" padding="0 20px 0 0">
TemplateHedgehog Price Promise, with 35‐day money‐back guarantee
</mj-social-element>
</mj-social>
</mj-column>
</mj-group>
<mj-group>
<mj-column>
<mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
<mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="delivery" mj-class="body white" color="white" padding="0 20px 0 0">
Free next‐day delivery and free returns
</mj-social-element>
</mj-social>
</mj-column>
</mj-group>
</mj-section>
<mj-section padding-top="0">
<mj-group>
<mj-column>
<mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
<mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="guarantee" mj-class="body white" color="white" padding="0 20px 0 0">
2‐year guarantee, activated automatically
</mj-social-element>
</mj-social>
</mj-column>
</mj-group>
<mj-group>
<mj-column>
<mj-social icon-size="48px" mode="horizontal" align="left" padding="0 0 10px 0">
<mj-social-element src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" name="pay-monthly" mj-class="body white" color="white" padding="0 20px 0 0">
Monthly payments to spread the cost
</mj-social-element>
</mj-social>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<!-- #-END-# buy direct left dark -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# buy direct left dark -->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#102447;background-color:#102447;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="#102447" ><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;padding-bottom:10px;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;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:36px;font-weight:800;line-height:40px;text-align:center;color:#ffffff;"
>More benefits when you buy directly from TemplateHedgehog</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="width:286px;" ><![endif]-->
<div
class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
>
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![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="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
>
<!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:0 20px 0 0;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
>
<tbody>
<tr>
<td style="font-size:0;height:48px;vertical-align:middle;width:48px;">
<img
alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
<span
style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
TemplateHedgehog Price Promise, with 35‐day money‐back guarantee
</span>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<!--[if mso | IE]></td><td class="" style="width:286px;" ><![endif]-->
<div
class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
>
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![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="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
>
<!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:0 20px 0 0;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
>
<tbody>
<tr>
<td style="font-size:0;height:48px;vertical-align:middle;width:48px;">
<img
alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
<span
style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
Free next‐day delivery and free returns
</span>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</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="width:286px;" ><![endif]-->
<div
class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
>
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![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="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
>
<!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:0 20px 0 0;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
>
<tbody>
<tr>
<td style="font-size:0;height:48px;vertical-align:middle;width:48px;">
<img
alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
<span
style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
2‐year guarantee, activated automatically
</span>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<!--[if mso | IE]></td><td class="" style="width:286px;" ><![endif]-->
<div
class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
>
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:286px;" ><![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="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;"
>
<!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:0 20px 0 0;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:48px;"
>
<tbody>
<tr>
<td style="font-size:0;height:48px;vertical-align:middle;width:48px;">
<img
alt="" src="https://placehold.co/96x96/2f67ef/ffffff/png?text=TH" style="border-radius:3px;display:block;" width="48"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">
<span
style="color:white;font-size:17px;font-family:'Inter', Arial, sans-serif;line-height:28px;text-decoration:none;">
Monthly payments to spread the cost
</span>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</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-# buy direct left dark -->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