An email-safe promotional sale template in pure HTML with inline styles: a giant yellow "40% OFF" banner, a dashed discount code box, a four-product grid with old and new prices, a bulletproof "Shop the sale" button and a terms line. Use it for flash sales, weekend promotions or seasonal discount campaigns.
How it works
The markup starts with the hidden .pse-preheader text that inbox lists show as the preview line, followed by the full-width .pse-wrapper table that paints the grey background. Inside it, .pse-container is limited to 600 px with max-width, and an MSO conditional comment wraps it in a fixed 600 px table for Outlook on Windows, which ignores max-width.
Every section is a table row of role="presentation" tables with all colors, fonts and spacing as inline style attributes, so Gmail keeps the design even when it strips embedded styles. The banner uses 'Arial Black' with an Arial fallback, the code box is a single cell with a 2px dashed border, and the product grid is two rows of two .pse-col cells, each with an image that has width, height, alt and display:block. The button is a VML v:roundrect for Outlook and a padded link inside .pse-btn for every other client.
style.css is optional: it adds a hover color on .pse-btn and a phone layout below 480 px.
Customization
- Change
#ffd60a(yellow) and#111111(black) in the inline styles to recolor the banner, code box, logo bar and button; replace them in the VMLfillcolortoo. - Edit the text of
.pse-heroand theVOLT40code in.pse-codeto run a different offer; also update the preheader and the terms line. - Swap the four product images, names and prices inside the
.pse-colcells; keep images square at 258 x 258 so the rows stay even. - Reduce
.pse-heroin the@mediablock ofstyle.cssif your headline is longer than "40% OFF". - Remove the
.pse-colrule fromstyle.cssto keep the grid two columns wide on phones instead of stacking it. - Replace the logo text "VOLT&VALE" with an
<img>logo (absolute URL,width,height,alt).
Use cases
- Flash sales: a giant 40% OFF banner and dashed code box announce a short offer
- Weekend promotions: a four-product grid shows old and new prices
- Seasonal campaigns: a bulletproof Shop the sale button drives clicks to the store
- Online retailers: a terms line keeps the discount conditions clear at the bottom
Accessibility
Layout tables carry role="presentation" so screen readers skip table semantics, and the content keeps a real h1 and h2. Every product image has a descriptive alt, so the email still makes sense with images blocked. Text colors meet WCAG contrast on their backgrounds (black on yellow, yellow on black, dark grey on white), prices are written as text, and the struck-through original price is followed by the sale price so it reads in order.
Usage notes
The patterns target Outlook 2016+ on Windows (MSO conditionals and VML), Outlook.com, Gmail web and apps, Apple Mail and iOS Mail. Wrap index.html in your own <!doctype html> document with <meta charset> and a viewport tag before sending, and inline style.css into a <style> block in the head. The product photos come from Unsplash; replace them with your own hosted images.
