Email Two-Tiered Info Footer Template

Create a clean visual hierarchy in your emails with this organized two-tiered footer template.

This popular design pattern separates your footer into two distinct sections. A primary top tier with a colored background is used for your logo and social links, while a secondary, plainer bottom tier handles the required compliance information, creating a sophisticated and uncluttered look.

Screenshot of a two-tiered email footer with a dark top bar for social icons and a light bottom bar for legal text.

Get Source Code Preview

About this Two-Tiered Email Footer Template

This footer is a workhorse for almost any type of marketing or informational email. By using different background colors, it creates a strong visual separation between your engaging brand content (logo, social links, etc) and the necessary but less exciting legal text (address, unsubscribe link). This hierarchical approach makes your footer easy to scan and looks highly professional. The template is built with email-safe tables and inline CSS for maximum reliability.

Features

Clear Visual Hierarchy: The two-toned design effectively separates primary and secondary information.
Brand-Focused Top Tier: A prominent section for your logo and social media icons.
Unobtrusive Bottom Tier: A clean, simple section for all legally required compliance text.
Maximum Compatibility: Uses the standard approach of table-based layouts and inlined CSS for consistent rendering in all major email clients.

Ideal Use Cases

Most marketing newsletters and promotional emails.
Corporate announcements.
Blog post notifications.
Any email where a professional, organized look is desired.

Code Breakdown

The structure consists of two main table elements nested within a full-width parent table. The first table acts as the top tier, with a tr that has a specific background-color set. The second table acts as the bottom tier with a different background color. Inside each, another nested table with a fixed width (600px) is used to center the content and ensure it doesn't stretch to full width in clients like Outlook. This multi-layered table structure is essential for creating these "full-bleed" background color effects in HTML email.

Code

Here's the full code for the footer template:

<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
    
    <tr>
        <td style="background-color:#2d3436; padding:30px 20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation" align="center" style="width:600px; max-width:600px;">
                <tr>
                    
                    <td align="left" valign="middle">
                        <a href="https://example.com" target="_blank">
                            <img src="https://placehold.co/120x30/ffffff/2d3436?text=LOGO" width="120" alt="Company Logo" style="width:120px; max-width:120px; display:block; border:0;">
                        </a>
                    </td>
                    
                    <td align="right" valign="middle">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                            <tr>
                                <td style="padding-left:10px;">
                                    <a href="https://example.com" target="_blank"><img src="https://placehold.co/28x28/ffffff/2d3436?text=t" width="28" alt="Twitter" style="width:28px; max-width:28px; display:block; border:0; border-radius:50%;"></a>
                                </td>
                                <td style="padding-left:10px;">
                                    <a href="https://example.com" target="_blank"><img src="https://placehold.co/28x28/ffffff/2d3436?text=f" width="28" alt="Facebook" style="width:28px; max-width:28px; display:block; border:0; border-radius:50%;"></a>
                                </td>
                                <td style="padding-left:10px;">
                                    <a href="https://example.com" target="_blank"><img src="https://placehold.co/28x28/ffffff/2d3436?text=in" width="28" alt="LinkedIn" style="width:28px; max-width:28px; display:block; border:0; border-radius:50%;"></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    
    <tr>
        <td style="background-color:#f8f9fa; padding:30px 20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation" align="center" style="width:600px; max-width:600px;">
                <tr>
                    <td align="center" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#777777;">
                        <p style="margin:0 0 10px 0;">
                            You received this email because you subscribed to our newsletter.
                        </p>
                        <p style="margin:0 0 10px 0;">
                            <a href="https://example.com" target="_blank" style="color:#777777; text-decoration:underline;">Update your preferences</a> | 
                            <a href="https://example.com" target="_blank" style="color:#777777; text-decoration:underline;">Unsubscribe</a>
                        </p>
                        <p style="margin:0;">
                            &copy; 2025 Your Company, 123 Brand Lane, Suite 100, City, State 12345
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

View Output