Developer reference
Three-article roundup grid for editorial newsletters, content marketing sends, and reading lists.
Tags: blog roundup · newsletter · articles · grid
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 hold up in Gmail web and mobile views. |
| Outlook Desktop (Windows) | Partial | Three-column article grids work well, though Outlook can tighten captions and stack the cards sooner. |
| Apple Mail (macOS + iOS) | Tested | No additional notes. |
| Yahoo Mail | Partial | Yahoo Mail may add extra vertical spacing around image-heavy cards, so summaries should stay compact. |
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.
Newsletter Layouts
Two-by-two article grid for heavier editorial newsletters, curated reading, and content roundups.
Newsletter Layouts
Lead-story feature block for newsletter intros, editorial campaigns, and long-form content sends.
Newsletter Layouts
Short editorial intro block for newsletters and digest-style sends.
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-# Blog Roundup Grid -->
<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">Blog roundup</mj-text>
<mj-text mj-class="h4 text-primary extrabold" align="center" padding-bottom="10px">Three reads for this week</mj-text>
</mj-column>
</mj-section>
<mj-section padding="0 24px">
<mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
<mj-image src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=320&h=240&fit=crop&q=85" fluid-on-mobile="true" alt="Article one" border-radius="8px" padding="0 0 10px 0" />
<mj-text mj-class="small text-primary bold" align="left" padding="0 0 4px 0">Article one</mj-text>
<mj-text mj-class="small text-muted" align="left" padding="0">Short summary</mj-text>
</mj-column>
<mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
<mj-image src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=320&h=240&fit=crop&q=85" fluid-on-mobile="true" alt="Article two" border-radius="8px" padding="0 0 10px 0" />
<mj-text mj-class="small text-primary bold" align="left" padding="0 0 4px 0">Article two</mj-text>
<mj-text mj-class="small text-muted" align="left" padding="0">Short summary</mj-text>
</mj-column>
<mj-column width="33.33%" vertical-align="top" padding="0 8px 18px 8px">
<mj-image src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=320&h=240&fit=crop&q=85" fluid-on-mobile="true" alt="Article three" border-radius="8px" padding="0 0 10px 0" />
<mj-text mj-class="small text-primary bold" align="left" padding="0 0 4px 0">Article three</mj-text>
<mj-text mj-class="small text-muted" align="left" padding="0">Short summary</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- #-END-# Blog Roundup Grid -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# Blog Roundup Grid -->
<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;"
>Blog roundup</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;"
>Three reads for this week</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 24px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 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:181px;" class="mj-full-width-mobile">
<img
alt="Article one" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=320&h=240&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:left;color:#1a1a1a;"
>Article one</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
>Short summary</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 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:181px;" class="mj-full-width-mobile">
<img
alt="Article two" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=320&h=240&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:left;color:#1a1a1a;"
>Article two</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
>Short summary</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:197.3136px;" ><![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 18px 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 10px 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:181px;" class="mj-full-width-mobile">
<img
alt="Article three" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=320&h=240&fit=crop&q=85" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="181" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0 0 4px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:left;color:#1a1a1a;"
>Article three</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
>Short summary</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-# Blog Roundup Grid -->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