An email-safe subscription renewal reminder for a meal-kit service, built with tables and inline styles. It tells the customer that the plan "renews in 7 days", shows the plan name, box size, billing cycle and renewal amount, lists the plan benefits and offers a bulletproof "Manage subscription" button with skip, pause and cancel links. The patterns target Outlook (Windows desktop), Gmail and Apple Mail.
How it works
A hidden preheader (.rr-preheader) sets the inbox preview text. The full-width .rr-wrap table paints the cream background and the .rr-container table holds the 600 px email; MSO conditional comments wrap it in a fixed-width table for Outlook. A "View in browser" line and a serif text logo sit above the card.
The card opens with the .rr-hero photo, set to width:100% and height:auto so it scales on phones while the width and height attributes keep Outlook at 600 px. The .rr-title heading and a friendly intro follow. The plan summary is a dashed-border table with label and value rows and a highlighted renewal amount. Benefits are rows with a small round check-mark cell (a text character, not an icon font). The primary button is an .rr-btn link for modern clients and a VML v:rect inside <!--[if mso]> for Outlook. Text links for skip, pause and cancel sit underneath, and the footer carries the sender address, help center and unsubscribe links.
Customization
- Change
#1f4d3a(logo, button, VMLfillcolor, prices) and#d9734e(logo accent, eyebrow) to your brand palette. - Edit the "renews in 7 days" wording in the
.rr-titleheading, the preheader and the "Renews" row; send the email the matching number of days before renewal. - Replace the
.rr-heroimagesrcandaltwith your own product photo, keeping a 600 px wide crop. - Add or remove benefit rows by copying a
<tr>in the benefits table. - Update the
hrefof.rr-btnand the VMLhreftogether so Outlook and other clients open the same page. .rr-padreduces side padding and.rr-btngoes full width below 480 px; adjust the media query instyle.cssto change the breakpoint.
Use cases
- Subscription boxes and meal kits: tell customers their plan renews in 7 days with the amount and box size
- SaaS billing: remind users of the renewal date and billing cycle before the card is charged
- Membership services: list plan benefits to remind members what they keep by renewing
- Retention emails: give customers skip, pause and cancel links next to a clear Manage subscription button
- Outlook and Gmail campaigns: a table-based layout with a bulletproof button that renders reliably in major clients
Accessibility
All layout tables use role="presentation". The photo has descriptive alt text, headings are real h1 and h2 elements, and body text in dark grey on white or cream meets WCAG AA contrast. The cancel link stays visible and clearly labelled instead of being hidden in the footer.
Usage notes
The photo comes from Unsplash; replace it with your own image hosted on your CDN. index.html contains body content only; put it in a full HTML document and paste style.css into a <style> block in the <head>. The email still renders correctly where clients strip those progressive extras.
