Mailviews

Base Layout

Components that you copy from the category pages are just blocks of HTML (sometimes including CSS style tags), so they need to be wrapped in a HTML email layout to work.

We highly recommend that you use our example layouts, as they have been tested to work well across all major email clients and include all the necessary boilerplate code.

For HTML

Use this layout with the components that have HTML with inlined CSS (first option in the component dropdown).

Replace the [COMPONENTS] placeholder with the actual components. If a component includes a <style> tag, move the contents of that tag to the <style> tag in the <head> of this layout.

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="utf-8">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
    .mso-break-all {word-break: break-all;}
  </style>
  <![endif]-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet" media="screen">
  <style>
    /* Add contents of <style> tags in components here */
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;">
  <div 
    role="article" 
    aria-roledescription="email" 
    aria-label="[email subject]" 
    lang="en"
    style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
  >
    [COMPONENTS]
  </div>
</body>
</html>

For accessibility, make sure to replace the [email subject] placeholder with the actual subject of your email or who it's from.

For Maizzle

When using Maizzle components, you can use the layout from the official Maizzle starter, with some minor adjustments for the fonts:

<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="{{ page.charset || 'utf-8' }}">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
    .mso-break-all {word-break: break-all;}
  </style>
  <![endif]-->
  <if condition="page.title">
    <title>{{{ page.title }}}</title>
  </if>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet" media="screen">
  <style>
    @tailwind components;
    @tailwind utilities;

    img {
      @apply max-w-full align-middle;
    }
  </style>
  <stack name="head" />
</head>
<body class="m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || '' }}">
  <if condition="page.preheader">
    <div class="hidden">
      {{{ page.preheader }}}
      <each loop="item in Array.from(Array(150))">&#8199;&#65279;&#847; </each>
    </div>
  </if>
  <div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}" lang="{{ page.language || 'en' }}">
    <yield />
  </div>
</body>
</html>

Then, when creating a layout with Maizzle components, simply use the <x-component-name> syntax inside the component that represents the layout.

For example, if you saved your layout as layouts/newsletter.html, you could create a newsletter like this:

<x-newsletter>
    <x-component-1-name />
    <x-component-2-name />
</x-newsletter>

For Tailwind CSS

When using the Tailwind CSS versions of the components you can use the same strategy as for the Maizzle layout as above, since you'll still need to compile Tailwind CSS.

The only difference is that you'd simply stack the components directly inside the layout, like so:

<x-newsletter>
    <!-- Paste Tailwind CSS component versions here -->
</x-newsletter>

Google Fonts

The layout uses the Inter font from Google Fonts, with a fallback to system sans-serif fonts.

To use a different font, simply edit the <link> tag in the <head> and the font-family style on the <div> in the <body>.

- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" media="screen">

<div 
  role="article" 
  aria-roledescription="email" 
  aria-label="[email subject]" 
  lang="en"
  style="font-family: Roboto, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
>
  [COMPONENTS]
</div>

MSO

You'll see <!--[if mso]> comments used quite often throughout the components. These are conditional comments that target Microsoft Outlook, which uses the Microsoft Word rendering engine for HTML emails.

The layout defines a bunch of things specifically for Outlook, and we strongly recommend keeping these as they are, unless you have a specific reason to change them and know what you're doing:

The xmlns:v attribute on the <html> tag enables VML support in Outlook, which we use for background images and some absolutely-positioned elements.
<o:PixelsPerInch> sets the pixels per inch to 96, helping with sizing issues on high-DPI screens.
"Segoe UI" is used as the default font for Outlook, it is a system font on Windows.
The .mso-break-all utility class is included to help with word-breaking in Outlook in some cases.

Web fonts support in email clients is limited, you can expect them to work on Apple devices and a handful of others, like Thunderbird, Samsung Email, or HEY.

Counterintuitively, Gmail does not support Google Fonts, though it will render Roboto and Google Sans in the webmail, but only because they are used by the Gmail interface itself.

Components

Mailviews Components currently come in 3 flavors:

HTML
Maizzle
Tailwind CSS

HTML

These are blocks of HTML with inlined CSS. You'll see most components include a <style> tag with CSS that cannot be inlined, such as media queries or pseudo selectors:

<style>
  .hover-underline:hover {
    text-decoration: underline !important
  }

  @media (max-width: 599px) {
    .sm-text-center {
      text-align: center !important
    }
  }
</style>

<table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
  <tr>
    <td>&zwj;</td>
    <td class="sm-text-center" style="width: 600px; max-width: 100%">
      <a href="https://example.com" style="color: #3b82f6" class="hover-underline">
        Discover now
      </a>
    </td>
    <td>&zwj;</td>
  </tr>
</table>

When copy-pasting a component to the layout, you need to take care to move the contents of the <style> tag to the <head> of the layout.

With the component and layout above, the resulting email would look like this:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <!-- ... -->

  <style>
    .hover-underline:hover {
      text-decoration: underline !important
    }

    @media (max-width: 599px) {
      .sm-text-center {
        text-align: center !important
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;">
  <div role="article" aria-roledescription="email" aria-label="[email subject]" lang="en">

    <table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
      <tr>
        <td>&zwj;</td>
        <td class="sm-text-center" style="width: 600px; max-width: 100%">
          <a href="https://example.com" style="color: #3b82f6" class="hover-underline">
            Discover now
          </a>
        </td>
        <td>&zwj;</td>
      </tr>
    </table>

  </div>
</body>
</html>

Maizzle

Since we've built all Mailviews components and templates with Maizzle, each component includes the source Maizzle component that you can add to your own Maizzle project.

Select "Maizzle" from the dropdown menu on the right of the component and make sure to switch to the Code view to see the source.

You'll immediately recognize Maizzle components because they start with a <script> tag that defines the props, for example:

<script props>
  module.exports = {
    containerClasses: props['container-class'] || '',
  }
</script>

<table
  class="w-full"
  style="background-color: theme(colors.slate.100);"
>
  <tr>
    <td>&zwj;</td>
    <td
      style="background-color: theme(colors.white);"
      class="w-[600px] max-w-full {{ containerClasses }}"
    >
      <!--  -->
    </td>
    <td>&zwj;</td>
</table>

You'll see that these components include both props and slots that make them easy to use.

We've structured Maizzle components so that you have greater control over what goes into a slot. Instead of passing just the text for a heading, for example, you pass an entire block of HTML.

So you'll see Maizzle source components defining slots like this:

<!-- components/heading.html -->
<td>
    <slot:title>
        <h4 class="m-0 text-2xl/8 font-bold text-white">
            <a href="https://example.com">
                Example
            </a>
        </h4>
    </slot:title>
</td>

This way, if you don't want the text linked, you can fill the title slot like so:

<x-heading>
    <fill:title>
        <h4 class="m-0 text-2xl/8 font-bold text-white">
            Example
        </h4>
    </fill:title>
</x-heading>

Read more about props and slots in the Maizzle documentation.

Tailwind CSS

Each component also includes an HTML version with Tailwind CSS classes that you can use in a Maizzle project if you don't need the props/slots functionality. You could even use these on a site, maybe as a newsletter archive.

These look like this:

<table class="w-full bg-slate-100" cellpadding="0" cellspacing="0" role="none">
  <tr>
    <td>&zwj;</td>
    <td class="w-[600px] max-w-full">
      <!--  -->
    </td>
    <td>&zwj;</td>
  </tr>
</table>

The key difference from the HTML components is that these use Tailwind utilities instead of inlined CSS, so you'd need to compile Tailwind and inline the CSS for these to work in an email.

Customization

Each component is designed to be a block that you can easily stack and combine with others to create your own email designs.

Structure

The main wrapper table for every component is a 3 column structure, with sides acting as gutters and the center column containing the actual content:

<!-- Outer bg color -->
<table class="w-full bg-slate-100">
  <tr>
    <!-- Left side -->
    <td>&zwj;</td>

    <!-- Main container -->
    <td class="w-[600px] max-w-full bg-white">
      <!-- Component content here -->
    </td>

    <!-- Right side -->
    <td>&zwj;</td>
  </tr>
</table>

The left and right sides expand to fill the available space, while the center column is has a fixed width of 600px, so it is automatically centered.

This allows for some creative customizations, such as adding different background colors on the sides, or having entire rows with a different background color that spans the full width of the email.

To better visualize the structure, hover each of the main columns in this component to highlight them:

<!-- Left side -->
<td>&zwj;</td>

        <!-- Main container -->
    <td class="w-[600px] max-w-full bg-white">
      <!-- Component content here -->
    </td>

<!-- Right side -->
<td>&zwj;</td>

Spacing

Most components use 44px or 24px top spacing, but no bottom spacing. This is to ensure consistent spacing when stacking multiple components vertically to quickly build a layout, like you would do in the Builder.

In some cases however, because of the nature of the design (like with HEROes or headers), components will include both top and bottom spacing.

Responsive

All Mailviews components and templates are responsive and work well on both desktop and mobile email clients. They are designed for a maximum width of 600px, which is common practice for HTML emails.

We use a desktop-first strategy, for two reasons:

It enables us to create beautiful, complex designs.
Mobile-first would require ghost tables for Outlook on Windows, which would bloat the HTML and make customization harder. And we don't like that.

There are two breakpoints that we use:

sm: for screens up to 599px wide

This is the most used breakpoint, as it covers basically all mobile devices.
xs: for screens up to 430px wide

Where it makes sense, we also use this breakpoint to better adapt the design to smaller mobile devices.

Note: responsiveness is achieved using CSS media queries, which very few email clients do not support (or which are lost when an email is forwarded). While these are edge cases, we do our best to use max-widths and other techniques to ensure the design still looks decent.

Compatibility

We use specialized testing platforms as well as real devices to render-test all components and templates in the most popular email clients.

If it's a client people actually use, we test it.

In general, we focus on the latest versions of the following clients:

Apple Mail (iOS, macOS)
Gmail (iOS, Android, webmail)
Outlook (Windows, macOS, iOS, webmail)
Yahoo! Mail / AOL (iOS, Android, webmail)
Thunderbird (Windows, macOS, Linux)

Those are the most popular email clients today, but our HTML emails also work in other webmail clients such as HEY, ProtonMail, Fastmail, Roundcube etc.

Documentation