Convert Figma logo to code with AI

ActiveCampaign logopostmark-templates

Rock-solid transactional email templates for applications.

3,069
1,097
3,069
8

Top Related Projects

Rock-solid transactional email templates for applications.

A free simple responsive HTML email template

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

17,026

MJML: the only framework that makes responsive-email easy

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

Sendwithus Open Source Email Templates

Quick Overview

The ActiveCampaign/postmark-templates repository is a collection of open-source transactional email templates designed for use with the Postmark email service. These templates are responsive, tested across various email clients, and can be easily customized to fit different branding needs.

Pros

  • Ready-to-use, professionally designed email templates
  • Responsive design, ensuring compatibility across various devices and email clients
  • Easily customizable to match brand identity
  • Includes both HTML and plain text versions for maximum compatibility

Cons

  • Limited to transactional email types (e.g., welcome emails, password resets)
  • Requires knowledge of HTML and CSS for extensive customization
  • May not be suitable for complex, highly-customized email designs
  • Specific to Postmark, potentially limiting use with other email services

Code Examples

This repository primarily contains HTML and CSS templates rather than a code library. However, here are a few examples of how you might use or customize these templates:

  1. Customizing the logo in a template:
<td class="email-masthead">
  <a href="{{product_url}}" class="f-fallback email-masthead_name">
    <img src="path/to/your/logo.png" alt="Your Company Name" width="200">
  </a>
</td>
  1. Modifying the color scheme:
<style>
  :root {
    --bg-color: #f2f4f6;
    --text-color: #51545e;
    --button-color: #22bc66;
  }
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  .button {
    background-color: var(--button-color);
  }
</style>
  1. Adding a custom footer:
<tr>
  <td>
    <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
      <tr>
        <td class="content-cell" align="center">
          <p class="f-fallback sub align-center">
            &copy; 2023 Your Company Name. All rights reserved.
          </p>
          <p class="f-fallback sub align-center">
            Your Company, Inc.
            <br>1234 Street Rd.
            <br>Suite 1234
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>

Getting Started

To use these templates:

  1. Clone the repository: git clone https://github.com/ActiveCampaign/postmark-templates.git
  2. Choose the desired template from the templates directory
  3. Copy the HTML and modify it to fit your needs
  4. Use the modified HTML with Postmark's API or dashboard to send emails

Note: Ensure you have a Postmark account and are familiar with their API or dashboard for sending emails.

Competitor Comparisons

Rock-solid transactional email templates for applications.

Pros of postmark-templates

  • Identical repository names suggest they might be the same project or closely related
  • Both likely contain email templates for use with Postmark

Cons of postmark-templates

  • Potential confusion due to identical repository names
  • Possible duplication of efforts if they are separate projects

Code comparison

As the repositories have identical names, it's not possible to provide a meaningful code comparison without additional information. The code structure and content might be similar or identical if they are the same project or forks of each other.

Additional notes

  • The identical repository names (postmark-templates) under the same owner (ActiveCampaign) suggest that this might be a duplicate listing or an error in the repository information.
  • To provide a more accurate comparison, it would be necessary to have access to the actual contents of both repositories or to clarify if they are indeed separate projects.
  • If these are separate projects, it would be advisable for ActiveCampaign to differentiate the repository names to avoid confusion and clearly indicate their purposes.

A free simple responsive HTML email template

Pros of responsive-html-email-template

  • Simpler and more lightweight, focusing on a single, versatile template
  • Extensive inline documentation and comments for easy customization
  • Includes a plain-text version of the email for better accessibility

Cons of responsive-html-email-template

  • Limited variety of templates compared to postmark-templates
  • Less comprehensive coverage of different email types and use cases
  • Fewer pre-built components and design elements

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">

postmark-templates:

<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center">
      <table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <td class="email-masthead">

The code comparison shows that both repositories use table-based layouts for email compatibility. responsive-html-email-template uses a simpler structure with fewer nested tables, while postmark-templates employs a more complex structure with additional classes and attributes for enhanced styling and responsiveness.

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

Pros of Cerberus

  • More comprehensive set of responsive email templates
  • Includes both hybrid and fluid layouts for better compatibility
  • Regularly updated with community contributions

Cons of Cerberus

  • Less focused on transactional emails
  • Fewer pre-designed templates for specific use cases
  • May require more customization for specific branding needs

Code Comparison

Cerberus (hybrid approach):

<div class="container">
  <!--[if mso]>
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
    <tr>
    <td>
  <![endif]-->
  <div class="content">
    <!-- Content here -->
  </div>
  <!--[if mso]>
    </td>
    </tr>
    </table>
  <![endif]-->
</div>

Postmark Templates:

<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center">
      <table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <!-- Content here -->
      </table>
    </td>
  </tr>
</table>

The code comparison shows that Cerberus uses a hybrid approach with conditional comments for Outlook compatibility, while Postmark Templates relies on nested tables for layout structure. Cerberus offers more flexibility for different email clients, while Postmark Templates focuses on simplicity and consistency across platforms.

17,026

MJML: the only framework that makes responsive-email easy

Pros of MJML

  • More flexible and customizable, allowing for complex email designs
  • Responsive by default, ensuring emails look good on various devices
  • Larger community and more frequent updates

Cons of MJML

  • Steeper learning curve due to its custom syntax
  • Requires compilation to generate HTML, adding an extra step to the workflow

Code Comparison

MJML:

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

Postmark Templates:

<table>
  <tr>
    <td>
      <p>Hello World</p>
    </td>
  </tr>
</table>

MJML uses a custom XML-like syntax that abstracts away complex HTML and CSS, while Postmark Templates use standard HTML with inline styles. MJML requires compilation to generate the final HTML, whereas Postmark Templates can be used directly. MJML offers more flexibility and responsiveness out of the box, but Postmark Templates are simpler to understand and implement for those familiar with HTML.

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

Pros of email-blueprints

  • More comprehensive collection of email templates
  • Includes responsive designs for various email clients
  • Offers a wider range of template styles and layouts

Cons of email-blueprints

  • Less frequently updated compared to postmark-templates
  • May require more customization for specific use cases
  • Larger file size due to the extensive template collection

Code Comparison

postmark-templates:

<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td class="email-masthead">
      <a href="{{product_url}}" class="f-fallback email-masthead_name">
        {{product_name}}
      </a>
    </td>
  </tr>
  <!-- Email Body -->
  <tr>
    <td class="email-body" width="570" cellpadding="0" cellspacing="0">

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer">
  <tr>
    <td align="center" valign="top">
      <!-- Header -->
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
        <tr>
          <td valign="top" class="headerContent">
            <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
          </td>
        </tr>
      </table>
      <!-- End Header -->

Both repositories provide HTML email templates, but their structure and approach differ. postmark-templates focuses on simplicity and ease of customization, while email-blueprints offers more complex layouts with additional features like image placeholders and MailChimp-specific attributes.

Sendwithus Open Source Email Templates

Pros of sendwithus/templates

  • Larger variety of templates, including transactional and marketing emails
  • More comprehensive documentation and usage guidelines
  • Includes templates for multiple email service providers (ESPs)

Cons of sendwithus/templates

  • Less frequent updates and maintenance
  • Some templates may be outdated or not follow the latest email design best practices
  • Lacks specific focus on a single ESP, which may result in less optimized templates

Code Comparison

postmark-templates:

<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td class="email-body" width="100%" cellpadding="0" cellspacing="0">
      <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
        <!-- Email Body Content -->
      </table>
    </td>
  </tr>
</table>

sendwithus/templates:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
        <!-- Email Body Content -->
      </table>
    </td>
  </tr>
</table>

Both repositories offer email templates, but sendwithus/templates provides a broader range of options for various ESPs. postmark-templates focuses specifically on Postmark and may offer more optimized templates for that platform. The code comparison shows similar structure, with minor differences in class names and attributes used for layout.

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

Postmark Transactional Email Templates

Postmark Transactional Email Templates

Brought to you by Postmark

Content ready, mobile friendly, and beautiful across all major email clients.

What's this for?

Postmark Transactional Email Templates are rock-solid email templates that render beautifully in tons of email clients. They provide the foundation of our Postmark Templates feature, and we're glad to provide them as Open Source to the wider community.

These templates are built and maintained using MailMason, a grunt-based framework to help streamline the process of developing, testing, and maintaining a set of related transactional email templates. If you want to create or customize your own set of email templates, you can use MailMason to extend the existing emails or start from scratch to build an entirely new set.

CSS & Inlining

There are two sets of templates here. The first set is in the /templates folder and contains the base templates with the CSS all contained in a style block. In this state, they're easier to edit, but they'll have limited compatibility with email clients. The other set in /templates-inlined has the same templates but with the CSS already inlined. They'll be a bit more tedious to make changes to, but you won't need to use anything to inline the CSS.

Inline the CSS

For client compatibility, HTML emails should always be inlined before sending. Here are a couple of tools for doing that:

If you choose to send your emails with Postmark, each time you send we will automagically inline the CSS for you.

The Templates

Each template comes in three different generic layout variations: Basic, Basic full, and Plain. This gives you a starting point so that you can customize your templates to match your brand.

Starter templates side-by-side: Basic, basic full, and plain Dark mode compatibility

Welcome

Send a welcome email to users after they sign up.

Reset Password

Send users a link to reset their password.

Reset Password Help

Help users reset their password if they can’t remember their email.

Receipt

Send a receipt to users after they made a purchase.

Invoice

Request payment from a user.

Dunning

Let users know about a failed payment

Comment notification

Notify users of new comments by other users.

Note: Comment notification isn't the prettiest preview because it's just Mustachio. Since almost all content in this email is dynamic, it won't look good without real content. Don't worry though, that's how it's supposed to look.

Trial Expiring

Let users know when their trial is about to expire.

Trial Expired

Let users know when their expired trial.

User Invitation

Help users invite others to use your software.

We've also made sure that these have been tested for consistency in the following email clients:

  • Desktop
    • Apple Mail 9, 10, 11
    • Outlook 2007, 2010, 2011, 2013, 2016
    • Windows 10 Mail
  • Mobile
    • Gmail App (Android)
    • iPhones 6, 7, 8, SE, X
    • iPad (Retina)
    • iPad Mini
    • iPad Pro
  • Web
    • AOL
    • Gmail
    • Outlook.com
    • Yahoo