Three newsletter emails built in MJML: a one-column digest, a magazine issue with a lead story and two-up grid, and a single-message announcement. Sample copy written in full. Built for Outlook, Gmail and Apple Mail, dark mode handled. The digest is free.
What actually happens in each client, and why the markup is built the way it is.
Outlook renders mail through the Word engine. The layout is nested tables with conditional comments, so the structure holds and nothing collapses — but the dark theme is ignored and it stays light, which is intentional.
Gmail strips part of the media queries and clips messages over 102 KB. Each email here is well under that, and the mobile layout works even where the media queries are dropped.
Full support, including the dark theme. Backgrounds and text stay contrasty rather than being auto-inverted into mush.
Dark mode is handled with prefers-color-scheme plus
[data-ogsc] fallbacks for Outlook.com, which rewrites
colours instead of reading media queries.
| Client | Light | Dark |
|---|---|---|
| Outlook 2016 / 2019 / 365 (Windows) | ✓ | — |
| Outlook.com | ✓ | ✓ |
| Gmail web | ✓ | ✓ |
| Gmail iOS and Android | ✓ | partial |
| Apple Mail | ✓ | ✓ |
| Yahoo Mail | ✓ | ✓ |
| Thunderbird | ✓ | ✓ |
“partial” means the client applies its own colour inversion rather than reading the palette in the source. Nothing breaks — it simply is not identical to the design.
The home page and its CSS — enough to publish a one-pager. A credit link stays in the footer.
Every page, the Pro-only pages, the source files, no attribution, and 12 months of updates and email support.
Use it in unlimited personal and commercial projects, including client work.
Do not resell the template itself, alone or in a bundle.
Most company newsletters are one of three things, and each wants a different layout. The digest is a letter: an intro, three stories with a “read more”, a sign-off from a person and one button — the weekly email most teams actually send. The magazine is an issue: a dark masthead, a full-width lead story, two stories side by side that stack on phones, an “in brief” list and a promo card. The announcement is one message: a brand-coloured band with the headline and button, two paragraphs, three facts in a row, a closing line.
All three are nested tables with conditional comments where Outlook’s Word engine needs them, VML buttons, and a dark-mode block that Gmail and Apple Mail honour and Outlook ignores gracefully. The two-column grid uses MJML’s column model, which is the one way to get side-by-side that stacks without media queries Gmail strips.
The layouts ship with a real newsletter for a fictional bakery rather than {{lorem}}
placeholders, so you can see how much text each slot wants before you replace it. Only the links
are merge tags. Image slots carry an inline SVG placeholder with the size written on it; swap
each for a hosted image before sending — data URIs are blocked by Gmail.
Gmail on iOS and Android honours the dark theme by inverting colours itself rather than
reading prefers-color-scheme. The result is readable and contrasty, but it is Gmail’s
inversion, not the palette in the source. Nothing breaks; it simply is not identical.
First release
Four emails a shop actually sends, built in MJML in a 1970s ledger style: the parcel went out, here is your receipt, your seat is held, the thing you asked about is back. Warm paper, oxblood, squared corners. Built for Outlook, Gmail and Apple Mail, dark mode wired up. The dispatch email is free.
The four service emails every shop or app sends, built in MJML: order receipt with line items, shipped with tracking, password reset, email confirmation with a code. Built for Outlook, Gmail and Apple Mail, dark mode handled. The receipt is free.
A four-email onboarding series built in MJML: welcome, activation, trial ending, day-14 check-in. Built for Outlook, Gmail and Apple Mail, and it holds up in dark mode. The first email is free.