Developer reference

Footer Social Light

Light footer with social links, company details, and contact lines for marketing sends.

Footers blockProduction documentation pageSource file: footer-24-white.mjmlCopyable MJML and compiled HTML

All components See layouts Get Pro - £179

Tags: footer · social · light · contact

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 newsletters and promotional sends that still need brand presence plus visible contact routes at the bottom.
Replace every placeholder detail with live legal and support data before sending to production lists.

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: footer-24-white.mjml
4 client notes currently documented for this block.

Accessibility

Accessibility notes

Make each social destination clear because icon-only rows can be ambiguous for assistive technology users.
Keep the contact lines readable at smaller sizes because footer copy often tightens on mobile clients.

Rendering notes

Client-specific guidance

Gmail (Web + Mobile): Primary spacing, stack order, and CTA rendering stay stable in Gmail web and mobile views.
Outlook Desktop (Windows): Light social footers are stable, though Outlook can reduce spacing around icon rows and address blocks.

Client support

Compatibility

4 clients

Rendering support notes across major email clients.

Footer Social Light compatibility matrix
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	Light social footers are stable, though Outlook can reduce spacing around icon rows and address blocks.
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.

Related blocks

Continue building

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

Footers

Footer Privacy Light

Light regulatory footer for app or support sends that need policy and legal copy without store links.

Footers

Footer

Support details plus preference and unsubscribe links for compliant email endings.

Footers

Footer App Legal

Light footer variation for app and digital-product emails with extra trademark or platform-copy space.

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-# footer -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-top="30px">
    <mj-column vertical-align="middle">
      <mj-image src="/brand/hedgehog-mark-email.png" width="44px" alt="TemplateHedgehog icon" href="https://templatehedgehog.co.uk" padding="0" />
      <mj-text align="center" padding="8px 0 6px 0" font-family="'Manrope', 'Inter', Arial, sans-serif" font-size="16px" font-weight="700" color="#1a1a1a">
        <a href="https://templatehedgehog.co.uk" style="color:#1a1a1a; text-decoration:none;">TemplateHedgehog</a>
      </mj-text>
      <mj-text mj-class="body dark" align="center">Find out what makes us tick</mj-text>
      <mj-social align="center" font-size="15px" icon-size="30px" mode="horizontal">
        <mj-social-element name="facebook" color="white" href="https://templatehedgehog.co.uk"> </mj-social-element>
        <mj-social-element name="twitter" href="https://templatehedgehog.co.uk" color="white"> </mj-social-element>
        <mj-social-element name="linkedin" href="https://templatehedgehog.co.uk" color="white"> </mj-social-element>
      </mj-social>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column>
      <mj-text mj-class="body dark" align="center">Copyright &copy; 2026 TemplateHedgehog. All rights reserved.</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0px">
    <mj-column>
      <mj-text mj-class="body dark" align="center">Our office:<br /> Example House, River Street,<br /> London, WC2N 5DU</mj-text>
      <mj-text mj-class="body dark" align="center" padding-top="0px">Support: <a href="mailto:support@templatehedgehog.co.uk" target="_blank">support@templatehedgehog.co.uk</a></mj-text>
      <mj-text mj-class="body dark" align="center" padding-top="0px">Contact: <a href="mailto:hello@templatehedgehog.co.uk" target="_blank">hello@templatehedgehog.co.uk</a></mj-text>
      <mj-text mj-class="body dark" align="center" padding-top="0px">Call: +44 0000 000 000</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!--  #-END-# footer -->

Compiled HTML snippet

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

<!-- #-START-# footer -->
      <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-top:30px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:middle;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:middle;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:middle;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;word-break:break-word;"
                >
                  
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
      >
        <tbody>
          <tr>
            <td  style="width:44px;">
              
        <a
           href="https://templatehedgehog.co.uk" target="_blank"
        >
          
      <img
         alt="TemplateHedgehog icon" src="/brand/hedgehog-mark-email.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="44" height="auto"
      />
    
        </a>
      
            </td>
          </tr>
        </tbody>
      </table>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:8px 0 6px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:16px;font-weight:700;line-height:28px;text-align:center;color:#1a1a1a;"
      ><a href="https://templatehedgehog.co.uk" style="color:#1a1a1a; text-decoration:none;">TemplateHedgehog</a></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:#1a1a1a;"
      >Find out what makes us tick</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
                >
                  
      
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
              <table
                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:4px;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:30px;vertical-align:middle;width:30px;">
                  <a  href="https://www.facebook.com/sharer/sharer.php?u=https://templatehedgehog.co.uk" target="_blank">
                    <img
                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td><td><![endif]-->
              <table
                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:4px;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#55acee;border-radius:3px;width:30px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:30px;vertical-align:middle;width:30px;">
                  <a  href="https://twitter.com/intent/tweet?url=https://templatehedgehog.co.uk" target="_blank">
                    <img
                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border-radius:3px;display:block;" width="30"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
       
        
      
      </tr>
    
                </tbody>
              </table>
            <!--[if mso | IE]></td><td><![endif]-->
              <table
                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
              >
                <tbody>
                  
      <tr
        
      >
        
        <td  style="padding:4px;vertical-align:middle;">
          <table
             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#0077b5;border-radius:3px;width:30px;"
          >
            <tbody>
              <tr>
                <td  style="font-size:0;height:30px;vertical-align:middle;width:30px;">
                  <a  href="https://www.linkedin.com/shareArticle?mini=true&url=https://templatehedgehog.co.uk&title=&summary=&source=" target="_blank">
                    <img
                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/linkedin.png" style="border-radius:3px;display:block;" width="30"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </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]-->
              </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;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:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
      >Copyright &copy; 2026 TemplateHedgehog. All rights reserved.</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:0px;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:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
      >Our office:<br /> Example House, River Street,<br /> London, WC2N 5DU</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-top:0px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
      >Support: <a href="mailto:support@templatehedgehog.co.uk" target="_blank">support@templatehedgehog.co.uk</a></div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-top:0px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
      >Contact: <a href="mailto:hello@templatehedgehog.co.uk" target="_blank">hello@templatehedgehog.co.uk</a></div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-top:0px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
      >Call: +44 0000 000 000</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-# footer -->

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

Footer Social Light

Rendered component preview

Compatibility

Where this block appears in production layout systems

Weekly reporting digest

Newsletter digest

Continue building

Footer Privacy Light

Footer

Footer App Legal

Copy the code you need

MJML snippet

Compiled HTML snippet

Need the entire system available offline