Emberline Email Template
A responsive HTML email newsletter — “The Slow Pour” — hand-built for a craft coffee roaster from a dozen reusable blocks: hero, editorial, product grid, event invite, coupon, and a community wall, rendering cleanly from Apple Mail to Outlook.
Emberline Coffee is a responsive HTML email newsletter — The Slow Pour — a monthly dispatch designed and hand-built for a craft coffee roaster. It opens on a full-bleed hero behind the harvest headline, then moves through a founder’s letter, a single-origin spotlight, a three-up product grid, a step-by-step brew guide, an event invite, a subscriber coupon, and a wall of community photos — the full arc of a brand newsletter rather than a one-note blast.
Every section is a self-contained, reusable block, so the same template can be re-skinned for the next edition by swapping copy and imagery. The brand content here is a demo, but the structure is production-grade: it personalizes with merge tags and is built to render the same way across the clients that matter.
Highlights
- A whole newsletter, not a banner — masthead and preheader, a hero with a background image, editorial and origin-story blocks, a product grid, a numbered brew guide, an event invite, a coupon, a user-photo wall, housekeeping notes, and a branded footer.
- Renders where it counts — table-based scaffolding with inline styles, bulletproof buttons, and Outlook-specific conditional markup, so the layout holds together from Apple Mail and Gmail to Outlook.
- Built to reflow — a 600px desktop frame collapses its multi-column rows to a clean single column on phones, with type and spacing tuned for small screens.
- Personal and on-brand — merge tags drop in each reader’s name and referral code, and a warm palette of espresso, cream, and terracotta carries across alternating dark and light bands.
Build notes
The email is authored in MJML and compiled to bulletproof, table-based
HTML with all styles inlined for client compatibility. Microsoft conditional
comments and VML supply the Outlook fallbacks (ghost tables and mso button
padding), while media queries handle the mobile reflow. Headings are set in
Georgia with a Helvetica/Arial body stack, so nothing depends on a web font
that an inbox might strip. Dynamic fields — first name, referral code, and the
unsubscribe and preferences links — are left as merge tags ready to wire into an
ESP.
A portable, block-based email template — every section is reusable and the brand is swappable for the next send.