An email-safe product launch announcement with a bold dark hero, a full-width product photo, three feature blocks with image icons, a pricing note and a bulletproof "Try it now" button. It is built with tables, inline styles and hybrid columns, and targets Outlook (Windows desktop), Gmail and Apple Mail.
How it works
A hidden preheader (.pl-preheader) sets the inbox preview text. The full-width .pl-wrap table paints the near-black background and the .pl-container table holds the 600 px email, with MSO conditional comments adding a fixed 600 px table for Outlook. A brand bar with a "View in browser" link opens the email.
The hero is a centered block with a yellow pill label, the large .pl-title headline and a short intro. The .pl-hero product image follows at full width with height:auto, so it scales on phones. The three feature blocks use the hybrid pattern: each .pl-col is an inline-block div with max-width:192px in a cell with font-size:0, so they sit in a row at 600 px and stack on narrow screens even when media queries are stripped. MSO conditional comments turn them into a three-cell table for Outlook. Each block has a 36 px PNG icon (never an icon font), a heading and a short line. The pricing note and the .pl-btn button sit below a thin divider; Outlook gets a VML v:roundrect with the same color, size and link.
Customization
- Change
#ffc531(label, price,.pl-btnand the VMLfillcolor) to your launch accent color, and#0b0b0f/#16161dfor the background tones. - Replace the
.pl-heroimage with your own product shot; keep a 3:2 crop so thewidth="600" height="400"attributes stay correct. - Swap the three feature icons for your own 72 px PNG icons and edit the headings and copy in each
.pl-col. - Change the launch price, shipping and warranty lines in the pricing table.
- Update the
hrefon.pl-btnand on thev:roundrecttogether. - On phones
style.csslowers the.pl-titlesize, widens.pl-coland makes.pl-btnfull width.
Accessibility
Layout tables have role="presentation". The product image has descriptive alt text, the feature icons are decorative with alt="" because the headings carry the meaning, and the button label is real text. White and light grey text on the dark background and dark text on yellow meet WCAG AA contrast.
Usage notes
The product photo comes from Unsplash and the icons are Twemoji PNGs from jsDelivr (CC-BY 4.0); replace both with your own hosted assets before sending. index.html is body content only: wrap it in a full HTML document and paste style.css into a <style> block in the <head>. Some clients apply automatic dark mode; this template is already dark, so colors stay stable.
