Card Expiring Update email template
A billing note for software subscriptions: the card runs out next month, with two side by side cards on what happens and what to do.
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>Card Expiring Update</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-ds-34{font-size:28px!important;line-height:31px!important;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#14110e!important;}
.ete-content{background-color:#1d1915!important;}
.ete-text{color:#e4dcd3!important;}
.ete-heading{color:#fff7ef!important;}
.ete-muted{color:#a89c8f!important;}
.ete-link{color:#f09a6e!important;}
.ete-border{border-color:#3a332c!important;}
.ete-panel{background-color:#27211c!important;border-color:#3a332c!important;}
.ete-btn{background-color:#e8804f!important;border-color:#e8804f!important;}
.ete-btn-text{color:#1d1915!important;}
.ete-btn-outline{border-color:#e8804f!important;}
.ete-btn-outline-text{color:#e8804f!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:#e4dcd3!important;}
[data-ogsc] .ete-heading{color:#fff7ef!important;}
[data-ogsc] .ete-muted{color:#a89c8f!important;}
[data-ogsc] .ete-link{color:#f09a6e!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#14110e!important;}
[data-ogsb] .ete-content{background-color:#1d1915!important;}
[data-ogsb] .ete-panel{background-color:#27211c!important;border-color:#3a332c!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1ece6;">
<!-- 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;">The card ending 4417 runs out on November 30. Two minutes today keeps your plan running. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1ece6;">
<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;border-radius:4px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td class="ete-px" style="padding:24px 32px 8px;"><p class="ete-link" style="margin:0 0 12px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#a8431a;text-align:left;">Billing</p><h1 class="ete-heading ete-ds-34" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:34px;line-height:41px;font-weight:700;color:#1f1b17;text-align:left;mso-line-height-rule:exactly;">Your card runs out next month</h1></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-panel" valign="top" style="padding:16px;background-color:#f8f4ef;border:1px solid #e3dbd2;border-radius:4px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1f1b17;text-align:left;mso-line-height-rule:exactly;">What happens</h3></div><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#45403a;padding-top:6px;text-align:left;">The card ending 4417 expires on November 30. Your December 14 payment for the Workshop plan will not go through.</p></td></tr></table></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-panel" valign="top" style="padding:16px;background-color:#f8f4ef;border:1px solid #e3dbd2;border-radius:4px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1f1b17;text-align:left;mso-line-height-rule:exactly;">What to do</h3></div><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#45403a;padding-top:6px;text-align:left;">Add a new card or update the date on this one. It takes two minutes, and your plan and files stay as they are.</p></td></tr></table></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><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/billing" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="8%" strokecolor="#a8431a" fillcolor="#a8431a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Update my card</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/billing" style="display:inline-block;background-color:#a8431a;border:1px solid #a8431a;line-height:48px;border-radius:4px;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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;"><span class="ete-btn-text" style="color:#ffffff;">Update my card</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:14px;line-height:22px;color:#736a61;text-align:left;">Already have a new card from your bank? It still needs to be added here, because the new number does not carry over by itself.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#736a61;line-height:20px;text-align:center;"><strong>Mapleframe Tools</strong><br>77 Foundry Lane, Pittsburgh, PA 15222</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#736a61;line-height:20px;text-align:center;padding-top:10px;">You get this email because it is about billing on your Mapleframe account.</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#736a61;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#736a61;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:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:18px;color:#736a61;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#736a61;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
Send this when the card on file is about to run out. There is no logo and no banner. The email opens on one clear headline, so the reader knows the point before reading a single line of body text.
Two cards sit side by side. The first says what happens if nothing changes, the second says what to do about it. One button goes straight to the billing page, and a small grey line below explains what to do if the bank has already sent a replacement card.
It suits subscription tools, memberships and any service that bills monthly. Change the last four digits, the dates and the plan name.
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
- Headline
- Two side by side cards
- Update card button
- Help line
- Footer
Subject line ideas
- Your card ends soon, {{first_name}}
- Your Mapleframe card runs out next month
- One small billing update for your account
Preview text idea
The card ending 4417 runs out on November 30. Two minutes today keeps your plan running.