Invoice Ledger Classic email template
A plain invoice that reads like an accounting page: wordmark with links, invoice title, three key figures, line items and a full-width pay button.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Invoice Ledger Classic</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
.ete-nav-cell{padding-top:12px!important;}.ete-nav-cell p{text-align:center!important;}
.ete-ds-38{font-size:28px!important;line-height:31px!important;}
.ete-icon-cell{padding-left:2px!important;padding-right:2px!important;}
.ete-stat-158{min-width:158px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0f1313!important;}
.ete-content{background-color:#171c1c!important;}
.ete-text{color:#d6dcdc!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9aa5a5!important;}
.ete-link{color:#7fd8c8!important;}
.ete-border{border-color:#2e3636!important;}
.ete-panel{background-color:#202626!important;border-color:#2e3636!important;}
.ete-btn{background-color:#62c7b5!important;border-color:#62c7b5!important;}
.ete-btn-text{color:#0d1413!important;}
.ete-btn-outline{border-color:#62c7b5!important;}
.ete-btn-outline-text{color:#62c7b5!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#d6dcdc!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9aa5a5!important;}
[data-ogsc] .ete-link{color:#7fd8c8!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0f1313!important;}
[data-ogsb] .ete-content{background-color:#171c1c!important;}
[data-ogsb] .ete-panel{background-color:#202626!important;border-color:#2e3636!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#eceeee;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Invoice 2041 for October: $2,764.80, due 14 November. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#eceeee;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td class="ete-px" style="padding:24px 32px 20px;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="252" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:47.01%;max-width:100%;width:47.01%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><span class="ete-heading ete-hf" style="font-family:Georgia, 'Times New Roman', serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-0.3px;color:#121a1c;">Penrose Bookkeeping</span></div><!--[if mso]></td><td width="284" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:52.98%;max-width:100%;width:52.98%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a class="ete-heading" href="https://example.com/invoices" style="display:inline-block;padding:4px 10px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#121a1c;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Invoices</a><a class="ete-heading" href="https://example.com/account" style="display:inline-block;padding:4px 10px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#121a1c;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Account</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-ds-38" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:38px;line-height:46px;font-weight:700;color:#121a1c;text-align:left;mso-line-height-rule:exactly;">Invoice 2041</h1></td></tr>
<tr><td class="ete-px" style="padding:20px 32px 12px;"><div style="font-size:0;text-align:center;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="268" valign="top"><![endif]--><div class="ete-stat-158" style="display:inline-block;vertical-align:top;width:50%;min-width:158px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-heading ete-hf" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:26px;line-height:29px;font-weight:700;color:#121a1c;text-align:center;mso-line-height-rule:exactly;">$2,764.80</p><p class="ete-muted" style="margin:0;padding-top:6px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5f6b6e;text-align:center;">Amount due</p></td></tr></table></div><!--[if mso]></td><td width="268" valign="top"><![endif]--><div class="ete-stat-158" style="display:inline-block;vertical-align:top;width:50%;min-width:158px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-heading ete-hf" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:26px;line-height:29px;font-weight:700;color:#121a1c;text-align:center;mso-line-height-rule:exactly;">14 Nov</p><p class="ete-muted" style="margin:0;padding-top:6px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5f6b6e;text-align:center;">Due date</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:24px;line-height:32px;font-weight:700;color:#121a1c;text-align:left;mso-line-height-rule:exactly;">Work in October</h2><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#5f6b6e;padding-top:4px;">Billed to Harbor Lane Studio</p><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;"><strong>Monthly bookkeeping</strong><br><span class="ete-muted" style="color:#5f6b6e;font-size:13px;">Three accounts, reconciled to 31 October</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;;white-space:nowrap;">$1,200.00</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;"><strong>Payroll runs</strong><br><span class="ete-muted" style="color:#5f6b6e;font-size:13px;">Four runs at $90</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;;white-space:nowrap;">$360.00</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;"><strong>Year-end preparation</strong><br><span class="ete-muted" style="color:#5f6b6e;font-size:13px;">First installment</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #d8dcdc;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;;white-space:nowrap;">$1,000.00</td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#5f6b6e;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;">$2,560.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#5f6b6e;">Sales tax 8%</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#2f3a3d;">$204.80</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #121a1c;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#121a1c;">Total due</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #121a1c;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#121a1c;">$2,764.80</td></tr></table></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/invoices/2041/pay" style="height:48px;v-text-anchor:middle;width:536px;" arcsize="4%" strokecolor="#0e4d45" fillcolor="#0e4d45"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Pay invoice 2041</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn ete-btn-full" href="https://example.com/invoices/2041/pay" style="display:inline-block;background-color:#0e4d45;border:1px solid #0e4d45;line-height:48px;border-radius:2px;color:#ffffff;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;width:100%;box-sizing:border-box;"><span class="ete-btn-text" style="color:#ffffff;">Pay invoice 2041</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 20px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0" border="0"><tr><td width="280" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p class="ete-heading" style="margin:0 0 8px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#121a1c;">Pay by transfer</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#5f6b6e;line-height:20px;">Penrose Bookkeeping LLC<br>
Account 0041 8820<br>
Reference: INV 2041</p></td></tr></table></div><!--[if mso]></td><td width="280" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p class="ete-heading" style="margin:0 0 8px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#121a1c;">Questions</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#5f6b6e;line-height:20px;">Your bookkeeper is Martin Oakes.</p><p style="margin:0;padding-top:4px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a class="ete-link" href="mailto:billing@example.com" style="color:#5f6b6e;text-decoration:underline;">Reply to this invoice</a></p><p style="margin:0;padding-top:4px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a class="ete-link" href="https://example.com/invoices" style="color:#5f6b6e;text-decoration:underline;">See past invoices</a></p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#5f6b6e;line-height:20px;text-align:left;"><strong>Penrose Bookkeeping</strong><br>400 Bank Street, Suite 12, Hartford, CT 06103</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#5f6b6e;line-height:20px;text-align:left;padding-top:10px;">You get this email because Harbor Lane Studio is a client of Penrose Bookkeeping.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#5f6b6e;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#5f6b6e;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#5f6b6e;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#5f6b6e;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
This invoice is for studios, consultants and bookkeepers who bill clients every month. It looks like a page from a ledger: a serif title, thin rules and no decoration. Penrose Bookkeeping is the sample sender.
A wordmark sits on the left with links to invoices and the client account on the right. The invoice number comes next as the main title, then a row with the two numbers that matter most: the amount and the due date. The line items follow with their prices, the tax row and the total, and one full-width button pays it all.
Two small columns near the end hold bank details for people who prefer a transfer, and the contact for questions. Change the items and figures for each client, and make sure the amount in the top row matches the total.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark with links
- Invoice title
- Amount and due date
- Line items and total
- Pay button
- Bank details and contact
- Footer
Subject line ideas
- Invoice 2041 from Penrose Bookkeeping
- Invoice 2041: $2,764.80 due 14 November
- Your October invoice is ready
Preview text idea
Invoice 2041 for October: $2,764.80, due 14 November.