Newsletter Email

v1.0.0

Click any text to edit it right here · click an image or link to jump to its setting

  • Replace the placeholder links: Header link, "View in browser" link, Button link, Story 1 link, Story 2 link, Story 3 link, X (Twitter), LinkedIn, YouTube, Unsubscribe link, Email preferences link.

Newsletter Email — Free Responsive HTML Email Template

Marketing · v1.0.0 · Updated 2026-10-17 · Gmail, Outlook & Apple Mail · Dark mode

CategoryMarketing
Tagsnewslettercontentblog digestsaasmarketingdark mode
Updated October 16, 2026

What's included

Features

Masthead with issue number, date and "View in browser" link
Featured story with a large image, tag, headline, summary and button
Editor's intro and personal sign-off
Three story summaries with tags and "Read more" links
Highlighted tip-of-the-week box
Social links and a CAN-SPAM footer with unsubscribe and preferences links
Serif headlines (Playfair Display) with Georgia fallback
Show or hide the featured story, tip box and social links
Editable light and dark palettes, hidden preheader and plain-text version
Copy the HTML, download a .html or ZIP file, or fork it to My Code

About this template

Newsletter Email — Free Responsive HTML Newsletter Template

Newsletter Email template: A weekly or monthly newsletter: masthead with issue number and date, an editor’s intro, a featured story with image and button, three article summaries with links, a highlighted tip box, social links and a CAN-SPAM-ready footer with unsubscribe.

Newsletter Email is a free, responsive HTML newsletter template for weekly and monthly emails, blog digests, product updates and creator newsletters. It has a masthead with the issue number, date and a "View in browser" link, a featured story with a large image and button, an editor's intro, three story summaries with "Read more" links, a highlighted tip box, a sign-off, social links and a CAN-SPAM-ready footer.

A layout people can skim

Most newsletter readers skim, so the structure does the work: one big featured story to grab attention, a short personal intro, then three summaries with a coloured rule, small tag, headline and one or two lines each. The tip box gives regular readers a reason to scroll to the end. Leave a story title empty to hide it, or switch whole sections off.

Editorial typography

Headlines default to Playfair Display, a serif with a magazine feel, over a clean system font for body text, with Georgia as the fallback where web fonts don't load. Change the fonts and the accent colour to match your brand in seconds.

Coded for real inboxes

Nested tables and inline styles hold the layout together in Gmail, Apple Mail, Yahoo and Outlook, and the featured button is a VML "bulletproof" button for Outlook on Windows. A dark palette, a hidden preheader and a plain-text version are included, and the editor warns you if the email grows close to Gmail's 102 KB clipping limit.

Compliant by default

Newsletters are commercial email, so the footer includes the reason people are receiving it, your postal address, an unsubscribe link and an email-preferences link, as US CAN-SPAM and the Gmail and Yahoo bulk-sender rules require.

Write your issue in the browser, then paste the HTML into Mailchimp, Kit (ConvertKit), Beehiiv, Brevo, MailerLite or Klaviyo, or fork it into My Code. New subscriber? Greet them first with the Welcome Email.

Why use it

Why Use the Newsletter Email Template

👀
Built for skimming
One featured story, short summaries and clear "Read more" links match how people actually read newsletters, and drive more clicks.
✍
Feels editorial
Serif headlines, an issue number and a personal intro make it feel like a publication, not an ad.
⚖
Compliant footer
Unsubscribe link, preferences link and postal address are already in place for CAN-SPAM and the Gmail and Yahoo sender rules.

How it’s different

How It’s Different From Other Free Email Templates

</>
Real email HTML you own
Not a locked design inside a sending platform. Copy production-ready HTML, download a .html file or fork it into My Code, and use it with any email service or your own code.
⚙
Coded for real inboxes
Tables, inline styles, Outlook conditional comments, a VML button and Outlook font fixes. Many free templates only look right in a browser.
◐
Dark mode built in
Separate, editable light and dark palettes, with a dark preview, instead of leaving dark mode to each email client.
✓
Checks before you send
Warnings for Gmail clipping, missing alt text, placeholder links, images that aren't hosted online, and a missing unsubscribe link or postal address.
Plain-text version included
A matching plain-text version is generated as you edit, ready for multipart emails and the clients and filters that read text.
◍
Free and private
No account, no watermark and no limits. Everything runs in your browser, and your edits are saved locally for next time.

Step by step

How to Use

  1. 1
    Set the inbox detailsWrite the sender name, subject line and preheader (the preview text shown next to the subject in the inbox). The character counts show when they get too long for phones.
  2. 2
    Edit the contentFill in the editor’s intro, featured story, more stories, tip box and social links, or click any text in the preview to jump to its field. Switch the featured story, tip box and social links on or off.
  3. 3
    Add your brandUpload or paste your logo and images, set the brand colour and the light and dark palettes, pick fonts, or apply your saved brand kit.
  4. 4
    Preview and checkSwitch between desktop, mobile and dark mode, and fix anything the pre-send checks flag, such as placeholder links or missing alt text.
  5. 5
    Export or forkCopy the HTML into Mailchimp, Klaviyo, HubSpot, Brevo or your own code, copy the plain-text version, download a ZIP with images, or fork it into My Code.

Real-world uses

Common Use Cases

📰
Weekly blog digest
Feature your best new post with its cover image, summarise three more articles, and use the tip box for a quick how-to that rewards loyal readers.
🚀
Monthly product update
Lead with the biggest release, list smaller improvements as stories tagged Product, Guide or Changelog, and link each one to its announcement or help article.
🎙
Creator or podcast newsletter
Feature this week's episode or video, link to past favourites and community picks, and sign off personally so subscribers feel they are hearing from you.
🏘
Community or nonprofit update
Share a featured story from the field, upcoming events and a volunteer spotlight, and use the tip box for a call for donations or helpers.

Got questions?

Frequently Asked Questions

Edit the template and open the HTML tab and click "Copy". In Mailchimp choose "Code your own" and paste it; in Kit (ConvertKit) and MailerLite create a custom HTML template; in Beehiiv use an HTML block. Then replace the unsubscribe link with the platform's merge tag, such as *|UNSUB|* in Mailchimp.

Three to five is a good range for a weekly email. This template has one featured story plus three summaries, and you can hide any of them by leaving the title empty.

Yes. Newsletters are commercial email under US CAN-SPAM, and Gmail and Yahoo require bulk senders to offer easy unsubscribe. The footer includes an unsubscribe link, a preferences link and your postal address.

1200 × 600 px, shown at 600 px wide, stays sharp on retina screens. Keep the file under about 200 KB, host it online or upload it here, and always fill in the alt text.

Outlook for Windows ignores web fonts, so headlines fall back to Georgia, and the template forces a safe font instead of Times New Roman. Apple Mail, iOS Mail and some Android clients show Playfair Display.

It saves an editable copy of your Newsletter Email in My Code, the UI Snippets code editor: the email markup goes in the HTML panel and its CSS (mobile and dark-mode rules plus fonts) in the CSS panel, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial email, with no sign-up and no watermark. Everything runs in your browser, and your edits are saved locally.