Developer reference

Weekly Digest List

Compact digest list for weekly summaries, curated links, and editorial update sends.

Newsletter Layouts blockProduction documentation pageSource file: weekly-digest-list.mjmlCopyable MJML and compiled HTML

All components See layouts Get Pro - £179

Tags: weekly digest · newsletter · editorial · links

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 when the email needs to summarise several small updates without heavy imagery or card treatment.
Keep headlines punchy and summaries short so the list feels curated rather than overwhelming.

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: weekly-digest-list.mjml
4 client notes currently documented for this block.

Accessibility

Accessibility notes

Make each digest item self-contained so readers can skim or navigate individual entries easily.
Use clear heading structure to separate the digest label from the list items beneath it.

Rendering notes

Client-specific guidance

Gmail (Web + Mobile): Primary spacing, stack order, and CTA rendering hold up in Gmail web and mobile views.
Outlook Desktop (Windows): Single-column text digests are highly stable across clients, including Outlook desktop.

Client support

Compatibility

4 clients

Rendering support notes across major email clients.

Weekly Digest List compatibility matrix
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	Single-column text digests are highly stable across clients, including Outlook desktop.
Apple Mail (macOS + iOS)	Tested	No additional notes.
Yahoo Mail	Tested	No additional notes.

Used in layouts

Where this block appears in production layout systems

These layout pages include this component in context, with block order, message structure, and QA guidance alongside the rendered email.

Weekly Digest System
Weekly reporting digest
Share recurring product or campaign performance updates using a stable digest structure.

Related blocks

Continue building

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

Newsletter Layouts

Editorial Newsletter Feature

Lead-story feature block for newsletter intros, editorial campaigns, and long-form content sends.

Newsletter Layouts

Multi-Article Newsletter Grid

Two-by-two article grid for heavier editorial newsletters, curated reading, and content roundups.

Newsletter Layouts

Newsletter Editor Note

Short editorial intro block for newsletters and digest-style sends.

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-# Weekly Digest List -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-bottom="16px">
    <mj-column width="520px">
      <mj-text mj-class="label thblue" align="left" padding-bottom="10px">Weekly digest</mj-text>
      <mj-text mj-class="h4 text-primary extrabold" align="left" padding-bottom="10px">This week at a glance</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0">
    <mj-column>
      <mj-text mj-class="body text-primary bold" align="left" padding-bottom="4px">Template review complete for Q2 onboarding sequence</mj-text>
      <mj-text mj-class="small text-muted" align="left" padding-bottom="14px">Content, legal copy, and localisation placeholders are now signed off.</mj-text>
      <mj-text mj-class="body text-primary bold" align="left" padding-bottom="4px">Deliverability baseline improved on Yahoo and Outlook</mj-text>
      <mj-text mj-class="small text-muted" align="left" padding-bottom="14px">Updated markup reduced clipping and improved read rates in legacy desktop clients.</mj-text>
      <mj-text mj-class="body text-primary bold" align="left" padding-bottom="4px">Next release window opens on Friday</mj-text>
      <mj-text mj-class="small text-muted" align="left" padding-bottom="0">Final QA checklist and stakeholder approvals must be complete by 16:00.</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Weekly Digest List -->

Compiled HTML snippet

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

<!-- #-START-# Weekly Digest List -->
      <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: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="left" 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:left;text-transform:uppercase;color:#2f67ef;"
      >Weekly digest</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" 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:left;color:#1a1a1a;"
      >This week at a glance</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: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="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;text-align:left;color:#1a1a1a;"
      >Template review complete for Q2 onboarding sequence</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:14px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
      >Content, legal copy, and localisation placeholders are now signed off.</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;text-align:left;color:#1a1a1a;"
      >Deliverability baseline improved on Yahoo and Outlook</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:14px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:left;color:#4a5568;"
      >Updated markup reduced clipping and improved read rates in legacy desktop clients.</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;text-align:left;color:#1a1a1a;"
      >Next release window opens on Friday</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="left" 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:14px;line-height:23px;text-align:left;color:#4a5568;"
      >Final QA checklist and stakeholder approvals must be complete by 16:00.</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-# Weekly Digest List -->

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

Weekly Digest List

Rendered component preview

Compatibility

Where this block appears in production layout systems

Weekly reporting digest

Continue building

Editorial Newsletter Feature

Multi-Article Newsletter Grid

Newsletter Editor Note

Copy the code you need

MJML snippet

Compiled HTML snippet

Need the entire system available offline