Convert Figma logo to code with AI

mailchimp logoemail-blueprints

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

6,985
2,775
6,985
37
View on GitHub

Top Related Projects

leemunroe's avatar

responsive-html-email-template

13,218

A free simple responsive HTML email template

emailmonday's avatar

Cerberus

4,987

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

mjmlio's avatar

mjml

16,905

MJML: the only framework that makes responsive-email easy

ActiveCampaign's avatar

postmark-templates

3,069

Rock-solid transactional email templates for applications.

sendwithus's avatar

templates

1,818

Sendwithus Open Source Email Templates

InterNations's avatar

antwort

3,595

Beautiful responsive email templates with code as beautiful as email templates can be

Quick Overview

The mailchimp/email-blueprints repository is a collection of HTML email templates and resources provided by Mailchimp. It offers a variety of pre-designed, responsive email layouts that can be customized for different purposes, such as newsletters, promotional campaigns, and transactional emails.

Pros

  • Ready-to-use, professionally designed email templates
  • Responsive layouts that work across various email clients and devices
  • Includes both simple and complex designs to suit different needs
  • Well-documented and maintained by a reputable email marketing company

Cons

  • Limited customization options compared to building emails from scratch
  • May require some HTML and CSS knowledge for extensive modifications
  • Some templates may look similar to other Mailchimp users' emails
  • Not frequently updated, with the last major update being several years ago

Code Examples

<!-- Basic responsive template structure -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" width="600" class="container">
                <tr>
                    <td>
                        <!-- Content goes here -->
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- Example of a responsive image -->
<img src="example.jpg" alt="Example Image" style="max-width: 100%; height: auto; display: block;">

<!-- Button example -->
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
        <td align="center">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <a href="http://example.com" target="_blank">Call to Action</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Getting Started

  1. Clone the repository:

    git clone https://github.com/mailchimp/email-blueprints.git

  2. Choose a template from the templates directory that suits your needs.

  3. Open the chosen template in a text editor and customize the content, colors, and images to match your brand.

  4. Test the email in various email clients and devices using a service like Litmus or Email on Acid.

  5. Once satisfied with the results, use the HTML in your email marketing platform or send it directly using an SMTP service.

Competitor Comparisons

leemunroe logo

responsive-html-email-template

13,218

A free simple responsive HTML email template

Pros of responsive-html-email-template

  • Simpler, more lightweight template focused on responsiveness
  • Easier to customize and adapt for specific needs
  • More frequently updated with recent commits

Cons of responsive-html-email-template

  • Less comprehensive, offering fewer template variations
  • Limited documentation compared to email-blueprints
  • May require more manual adjustments for complex layouts

Code Comparison

responsive-html-email-template:

<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
  <tr>
    <td>&nbsp;</td>
    <td class="container">
      <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <table role="presentation" class="main">

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer">
  <tr>
    <td align="center" valign="top">
      <!-- BEGIN PREHEADER // -->
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
        <tr>

The responsive-html-email-template uses a simpler structure with fewer nested tables, focusing on responsiveness. The email-blueprints template provides a more complex structure with additional elements for greater customization options.

emailmonday logo

Cerberus

4,987

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Pros of Cerberus

  • More lightweight and focused on responsive email templates
  • Regularly updated with the latest email client compatibility
  • Includes both hybrid and fluid responsive approaches

Cons of Cerberus

  • Fewer template options compared to Email Blueprints
  • Less extensive documentation and examples
  • May require more customization for complex layouts

Code Comparison

Cerberus (Fluid):

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding: 20px 0 30px 0;">
            <!-- Content goes here -->
        </td>
    </tr>
</table>

Email Blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width:100%;">
    <tbody class="mcnTextBlockOuter">
        <tr>
            <td valign="top" class="mcnTextBlockInner" style="padding-top:9px;">
                <!-- Content goes here -->
            </td>
        </tr>
    </tbody>
</table>

Both repositories offer valuable resources for email template development. Cerberus focuses on responsive design and compatibility, while Email Blueprints provides a wider range of templates and more extensive documentation. The choice between the two depends on specific project requirements and the level of customization needed.

mjmlio logo

mjml

16,905

MJML: the only framework that makes responsive-email easy

Pros of MJML

  • Offers a higher-level, component-based approach to email design
  • Provides a responsive design system out of the box
  • Has a larger and more active community, with frequent updates

Cons of MJML

  • Requires learning a new syntax and framework
  • May have a steeper learning curve for developers used to traditional HTML

Code Comparison

MJML:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

email-blueprints:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="center" valign="top">
      <table cellpadding="0" cellspacing="0" border="0" width="600">
        <tr>
          <td>Hello World</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

MJML simplifies email creation with a more intuitive structure, while email-blueprints uses traditional table-based HTML. MJML's approach is more modern and maintainable, but email-blueprints may be more familiar to developers accustomed to older email development techniques. Both repositories aim to improve email development, but MJML offers a more comprehensive solution with its framework and tooling.

ActiveCampaign logo

postmark-templates

3,069

Rock-solid transactional email templates for applications.

Pros of postmark-templates

  • More modern and responsive design approach
  • Better documentation and usage guidelines
  • Wider variety of email templates for different purposes

Cons of postmark-templates

  • Less customization options compared to email-blueprints
  • Fewer legacy email client support
  • Smaller community and fewer contributions

Code Comparison

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 10px 0 30px 0;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border: 1px solid #cccccc; border-collapse: collapse;">
        <!-- Content goes here -->
      </table>
    </td>
  </tr>
</table>

postmark-templates:

<div class="email-wrapper">
  <div class="email-header">
    <img class="logo" src="https://example.com/logo.png" alt="Logo">
  </div>
  <div class="email-body">
    <!-- Content goes here -->
  </div>
</div>

The code comparison shows that email-blueprints uses a more traditional table-based layout, while postmark-templates employs a more modern div-based structure. This reflects the different approaches to email design and compatibility between the two repositories.

sendwithus logo

templates

1,818

Sendwithus Open Source Email Templates

Pros of templates

  • More diverse template collection, including transactional emails
  • Better organized repository structure
  • More frequent updates and contributions

Cons of templates

  • Less comprehensive documentation
  • Fewer responsive design options
  • Limited customization guidance

Code Comparison

templates:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td style="padding: 20px;">
      <h1>Welcome!</h1>
      <p>Thank you for signing up.</p>
    </td>
  </tr>
</table>

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer">
  <tr>
    <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
        <tr>
          <td valign="top" class="bodyContent">
            <h1>Welcome!</h1>
            <p>Thank you for signing up.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The templates repository offers a simpler, more straightforward HTML structure, while email-blueprints provides a more nested and detailed table-based layout. The email-blueprints code includes more specific IDs and classes, potentially offering greater flexibility for styling and responsiveness.

InterNations logo

antwort

3,595

Beautiful responsive email templates with code as beautiful as email templates can be

Pros of Antwort

  • Focuses on responsive email templates with a mobile-first approach
  • Includes a build system for easier development and testing
  • Offers a more modern and streamlined codebase

Cons of Antwort

  • Fewer template options compared to Email Blueprints
  • Less comprehensive documentation and examples
  • Smaller community and fewer updates

Code Comparison

Antwort (using SCSS):

.container {
  max-width: 600px;
  margin: 0 auto;
  @media only screen and (max-width: 600px) {
    width: 100% !important;
  }
}

Email Blueprints (using CSS):

.container {
  width: 600px;
  margin: 0 auto;
}
@media only screen and (max-width: 480px) {
  .container {
    width: 100% !important;
  }
}

Both repositories provide email templates, but they differ in approach and features. Antwort focuses on responsive design and includes a build system, making it more suitable for modern email development workflows. Email Blueprints offers a wider variety of templates and more extensive documentation, which may be beneficial for beginners or those seeking diverse options. The code comparison shows that Antwort uses SCSS, allowing for nested media queries, while Email Blueprints uses standard CSS with separate media query blocks.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Email Blueprints

Brought to you by MailChimp, these email blueprints are licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails. They include template language elements that make them customizable when imported into a MailChimp account, as well as merge tags that will generate dynamic content when sent through MailChimp. Not a MailChimp user? You can sign up free or simply strip out merge tags and use these templates to send through any system.

For clarification on the coding practices shown in these emails, or for general HTML email knowledge, visit MailChimp's HTML Email Reference.

Contents

/modular-template-patterns contains a single template built out of modular blocks of common design patterns.

/responsive-templates contains a collection of responsive / mobile-friendly email templates with various layouts.

/templates contains a collection of fixed-width email templates with various layouts.

Responsive Templates & CSS Inlining

When inlining the CSS in the responsive templates, be sure not to include the styles within the media query; they should remain in the head element of the email. The MailChimp app and external CSS inliner both inline the CSS correctly, but many services may not.

Bitdeli