Developer reference

Quad Image Grid

Four-up card grid for products, resources, or editorial picks.

Product Sections blockProduction documentation pageSource file: quad-image.mjmlCopyable MJML and compiled HTML

All components See layouts Get Pro - £179

Tags: grid · four-up · cards · catalogue

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 dense product or content selections where breadth matters more than depth.
Keep copy very short or the four-up layout becomes hard to scan on mobile.

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: quad-image.mjml
4 client notes currently documented for this block.

Accessibility

Accessibility notes

Make each card label distinct so assistive technology users can tell items apart.
Check mobile stacking order to ensure the most important card appears first.

Rendering notes

Client-specific guidance

Gmail (Web + Mobile): Primary structure, spacing, and CTA rendering hold up in Gmail web and mobile views.
Outlook Desktop (Windows): Four columns often collapse aggressively in Outlook and smaller panes.

Client support

Compatibility

4 clients

Rendering support notes across major email clients.

Quad Image Grid compatibility matrix
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	Four columns often collapse aggressively in Outlook and smaller panes.
Apple Mail (macOS + iOS)	Tested	No additional notes.
Yahoo Mail	Tested	No additional notes.

Related blocks

Continue building

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

Product Sections

Dual Image

Responsive two-column cards for product highlights, service updates, or content picks.

Product Sections

Triple Image Showcase

Three-up image block for product, content, or feature showcases.

Product Sections

Direct Benefits Grid Dark

Dark two-by-two benefits grid for value propositions, purchase perks, or service selling points.

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-# Four Item Grid -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-bottom="16px">
    <mj-column>
      <mj-text mj-class="h4 text-primary extrabold" align="center" padding-bottom="8px">Four-item highlight grid</mj-text>
      <mj-text mj-class="body text-muted" align="center" padding-bottom="0">
        Use this block for feature spots, product picks, or compact operational updates.
      </mj-text>
    </mj-column>
  </mj-section>

  <mj-section padding="0 24px">
    <mj-column width="25%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=260&h=260&fit=crop&q=85" fluid-on-mobile="true" alt="Launch checklist" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 3px 0">Launch checklist</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">Ready to send</mj-text>
    </mj-column>
    <mj-column width="25%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=260&h=260&fit=crop&q=85" fluid-on-mobile="true" alt="Campaign draft" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 3px 0">Campaign draft</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">Copy approved</mj-text>
    </mj-column>
    <mj-column width="25%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=260&h=260&fit=crop&q=85" fluid-on-mobile="true" alt="Automation rules" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 3px 0">Automation rules</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">Segment updated</mj-text>
    </mj-column>
    <mj-column width="25%" vertical-align="top" padding="0 8px 18px 8px">
      <mj-image src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=260&h=260&fit=crop&q=85" fluid-on-mobile="true" alt="Delivery report" border-radius="8px" padding="0 0 10px 0" />
      <mj-text mj-class="small text-primary bold" align="center" padding="0 0 3px 0">Delivery report</mj-text>
      <mj-text mj-class="small text-muted" align="center" padding="0">92% inbox rate</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Four Item Grid -->

Compiled HTML snippet

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

<!-- #-START-# Four Item 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:16px;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;padding-bottom:8px;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;"
      >Four-item highlight grid</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;"
      >Use this block for feature spots, product picks, or compact operational updates.</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:148px;" ><![endif]-->
            
      <div
         class="mj-column-per-25 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:132px;" class="mj-full-width-mobile">
              
      <img
         alt="Launch checklist" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=260&h=260&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="132" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 3px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Launch checklist</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" 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:center;color:#4a5568;"
      >Ready to send</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:148px;" ><![endif]-->
            
      <div
         class="mj-column-per-25 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:132px;" class="mj-full-width-mobile">
              
      <img
         alt="Campaign draft" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=260&h=260&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="132" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 3px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Campaign draft</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" 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:center;color:#4a5568;"
      >Copy approved</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:148px;" ><![endif]-->
            
      <div
         class="mj-column-per-25 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:132px;" class="mj-full-width-mobile">
              
      <img
         alt="Automation rules" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=260&h=260&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="132" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 3px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Automation rules</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" 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:center;color:#4a5568;"
      >Segment updated</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:148px;" ><![endif]-->
            
      <div
         class="mj-column-per-25 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:132px;" class="mj-full-width-mobile">
              
      <img
         alt="Delivery report" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=260&h=260&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="132" height="auto"
      />
    
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 3px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Delivery report</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" 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:center;color:#4a5568;"
      >92% inbox rate</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-# Four Item Grid -->

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