About this set
Two transactional emails for billing: Invoice email with a bulletproof pay button, and Payment received email with an outline button. The plain HTML file is the email itself and differs from the web versions in this pack on purpose. Gmail, Outlook and Apple Mail strip or ignore much of a style block, so every colour, size and spacing is inline on the element, layout is done with role=”presentation” tables, and the email is 600 pixels wide through a ghost table for Outlook on Windows and max-width everywhere else. The pay button is bulletproof: a VML roundrect inside conditional comments for Outlook and a padded link for every other client, so it never falls back to a plain blue link. A hidden preheader sets the inbox preview line, and a short head style adds a phone layout and a focus ring where clients support them. The Bootstrap and Tailwind files are web previews of the same email, for a billing portal or a design review; a note at the top says that email clients need the inline-CSS version.
What’s included
- Inline styles and role="presentation" layout tables
- 600px layout with an Outlook ghost table and max-width for other clients
- Bulletproof buttons: VML for Outlook, padded links elsewhere
- Hidden preheader text for the inbox preview
- Invoice email and payment received email, with web previews in Bootstrap and Tailwind
Accessibility
Each email is wrapped in role="article" with an aria-label, layout tables are role="presentation" while the line items are a real data table with a caption and scoped headers, and the html element sets lang. Text contrast is at least 4.5:1, buttons are real links with descriptive text such as Pay $1,284.44, and the decorative check mark is hidden from screen readers.
Customise it
In the email, search and replace the inline colours #166534 (brand), #14532d (links) and #f0f7f2 (tint), including fillcolor and strokecolor on the VML buttons. In Bootstrap change --em-brand and --em-tint on .em; in Tailwind edit the em-* colours in @theme.
