HTML & MJML

Invoice Statement Email Template

Elevate every billing cycle with the Invoice Statement Email Template, built for agencies, logistics companies, and service businesses that need polished, professional monthly billing communications. Featuring a sharp navy-and-gold layout, an itemized summary table, and per-line detail cards, this responsive email template transforms routine financial statements into branded client experiences. Perfect for sending transactional receipts, order summaries, payment reminders, and end-of-month billing statements, it handles every financial touchpoint with clarity. Marketers, designers, and founders alike will appreciate the intuitive structure and prominent pay-invoice call to action that reduces friction and accelerates payments.
Edit In EmailBuilder.ai
Share:
Invoice Statement Email Template - email template preview
Show full preview ▼

About the Invoice Statement Email Template

Agencies, logistics firms, and service businesses lose credibility every time a billing email looks like an afterthought. The Invoice Statement Email Template fixes that instantly — pairing a sharp navy-and-gold layout with an itemized summary table and per-line detail cards to turn routine monthly statements into polished client touchpoints. Whether you're chasing faster payments or simply reinforcing your brand at every billing cycle, this structure builds the trust that gets invoices paid.

When to use this template

Send at the close of each billing cycle — typically the last business day of the month or immediately after a project milestone is reached. For one-time transactions, trigger delivery the moment a purchase or service is completed. Payment reminder variants work best 3 and 7 days before a due date.
  • A marketing agency sending branded monthly retainer billing statements to clients
  • A logistics company itemizing per-shipment charges across a 30-day period
  • A SaaS consultancy summarizing onboarding and implementation fees after project completion
  • A freelance design studio issuing a professional end-of-month invoice to recurring clients
  • An e-commerce fulfillment service detailing order processing and storage fees per line item
  • A corporate training provider billing multiple departments with separate service line breakdowns

Subject line ideas

  • Your October invoice is ready — review and pay
  • Action needed: Invoice #4821 due in 3 days
  • Your monthly statement is here — all the details inside
  • Invoice ready: see exactly what this month covered

Best practices for receipt / payment emails

  • Place the total amount due and due date in the first visible content block so clients never have to hunt for critical figures
  • Label every line item with the service name, date range, unit rate, and quantity to eliminate back-and-forth clarification emails
  • Make the Pay Invoice CTA button a high-contrast gold or accent color that stands out against the navy layout background
  • Include a short one-line account summary above the itemized table so clients instantly recognize the billing period and account name
  • Add a plain-text support contact or reply prompt below the CTA to reduce payment friction caused by unanswered billing questions

Template anatomy

How the Invoice Statement Email Template template is laid out, top to bottom:
  1. section (2 columns) containing text block.
  2. section (1 column) containing text block.
  3. section (2 columns) containing text block.
  4. section (1 column) containing text block.
  5. section (1 column) containing text block.
  6. section (1 column) containing table.
  7. section (1 column) containing text block.
  8. section (1 column) containing table, text block.
  9. section (1 column) containing table, text block.
  10. section (1 column) containing table, text block.
  11. section (2 columns) containing text block, button.
  12. section (1 column) containing text block.
  13. section (1 column) containing text block.
  14. section (1 column) containing divider.
  15. section (2 columns) containing text block.

Components used

Built from the following MJML elements:
33 text blocks4 tables1 button1 divider

Color palette

Colors used across the Invoice Statement Email Template template:
#3e4a44
#ecebe1
#123a2e
#e2a87b
#b7c7bc
#8fa898
#ffffff
#b85f30
#9c8e76
#6b7280
#f3f0e7
#a8531f

Typography

Font stacks declared in the template:
  • 'Segoe UI', Helvetica, Arial, sans-serif
  • Georgia, serif

MJML source code

A preview of the MJML markup for the Invoice Statement Email Template template. Open it free in EmailBuilder.ai to get the complete source and start customizing.
<mjml>
  <mj-head>
    <mj-title>Invoice Statement Email Template</mj-title>
    <mj-preview>Your July statement is ready — view the summary and pay online.</mj-preview>
    <mj-attributes>
      <mj-all font-family="'Segoe UI', Helvetica, Arial, sans-serif"></mj-all>
      <mj-text font-size="13px" line-height="21px" color="#3E4A44"></mj-text>
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#ECEBE1" width="600px">

    <!-- HEADER BAND -->
    <mj-section background-color="#123A2E" padding="32px 40px 24px 40px">
      <mj-column width="60%" vertical-align="top">
        <mj-text font-family="Georgia, serif" font-size="26px" letter-spacing="6px" color="#E2A87B" font-weight="700" padding="0">NORTHWIND</mj-text>
        <mj-text font-size="10px" letter-spacing="3px" color="#B7C7BC" text-transform="uppercase" padding="7px 0 0 0">Freight &amp; Fleet Services</mj-text>
      </mj-column>
      <mj-column width="40%" vertical-align="top">
        <mj-text font-size="10px" letter-spacing="2.5px" color="#8FA898" text-transform="uppercase" align="right" padding="0">Invoice Statement</mj-text>
        <mj-text font-family="Georgia, serif" font-size="20px" color="#FFFFFF" font-weight="700" align="right" padding="6px 0 0 0">July 2026</mj-text>
      </mj-column>
    </mj-section>

    <!-- ACCENT HAIRLINE -->
    <mj-section background-color="#B85F30" padding="0">
      <mj-column><mj-text font-size="1px" line-height="3px" color="#B85F30" padding="0">&nbsp;</mj-text></mj-column>
    </mj-section>

    <!-- META STRIP -->
    <mj-section background-color="#FFFFFF" padding="24px 40px 8px 40px">
      <mj-column width="55%" vertical-align="top">
        <mj-text font-size="10px" letter-spacing="2px" color="#9C8E76" text-transform="uppercase" padding="0">Billed To</mj-text>
        <mj-text font-size="16px" color="#123A2E" font-weight="700" padding="5px 0 0 0">Brightwave Media</mj-text>
        <mj-text font-size="12px" color="#6B7280" padding="2px 0 0 0">500 Harbor Avenue, Portland, OR</mj-text>
      </mj-column>
      <mj-column width="45%" vertical-align="top">
        <mj-text font-size="10px" letter-spacing="2px" color="#9C8E76" text-transform="uppercase" align="right" padding="0">Statement</mj-text>
        <mj-text font-size="13px" color="#123A2E" font-weight="600" align="right" padding="5px 0 0 0">01 – 31 Jul 2026</mj-text>
        <mj-text font-size="11px" color="#6B7280" align="right" padding="2px 0 0 0">No. NW-2026-07 · Issued 01 Aug</mj-text>
      </mj-column>
    </mj-section>

    <!-- GREETING -->
    <mj-section background-color="#FFFFFF" padding="14px 40px 4px 40px">
      <mj-column>
        <mj-text font-size="13px" line-height="21px" color="#3E4A44" padding="0">Hi Brightwave team,<br /><br />Here's your consolidated statement for <strong>July 2026</strong>. Below is a summary of this month's services, followed by the detail for each line. Everything's ready to settle online whenever you are — no action needed beyond payment.</mj-text>
      </mj-column>
    </mj-section>

    <!-- SECTION 01 LABEL -->
    <mj-section background-color="#FFFFFF" padding="26px 40px 0 40px">
      <mj-column border-left="4px solid #B85F30" padding-left="12px">
        <mj-text font-size="10px" letter-spacing="2.5px" color="#B85F30" text-transform="uppercase" font-weight="700" padding="0">Section 01</mj-text>
        <mj-text font-family="Georgia, serif" font-size="19px" color="#123A2E" font-weight="700" padding="3px 0 0 0">July 2026 Summary</mj-text>
      </mj-column>
    </mj-section>

    <!-- SUMMARY TABLE -->
    <mj-section background-color="#FFFFFF" padding="16px 40px 0 40px">
      <mj-column>
        <mj-table cellpadding="0" cellspacing="0" width="100%">
          <tr style="background-color:#123A2E;">
            <th style="padding:11px 16px; text-align:left; font-size:10px; letter-spacing:1.5px; color:#E2A87B; text-transform:uppercase;">Ref</th>
            <th style="padding:11px 8px; text-align:left; font-size:10px; letter-spacing:1.5px; color:#E2A87B; text-transform:uppercase;">Service</th>
            <th style="padding:11px 16px; text-align:right; font-size:10px; letter-spacing:1.5px; color:#E2A87B; text-transform:uppercase;">Amount</th>
          </tr>
          <tr style="background-color:#FFFFFF;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600; border-bottom:1px solid #EDE7DB;">NW-4101</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44; border-bottom:1px solid #EDE7DB;">Freight — West Coast route</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700; border-bottom:1px solid #EDE7DB;">$2,700.00</td>
          </tr>
          <tr style="background-color:#F5F2EA;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600; border-bottom:1px solid #EDE7DB;">NW-4102</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44; border-bottom:1px solid #EDE7DB;">Warehousing — July</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700; border-bottom:1px solid #EDE7DB;">$1,450.00</td>
          </tr>
          <tr style="background-color:#FFFFFF;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600; border-bottom:1px solid #EDE7DB;">NW-4103</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44; border-bottom:1px solid #EDE7DB;">Last-mile delivery</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700; border-bottom:1px solid #EDE7DB;">$980.00</td>
          </tr>
          <tr style="background-color:#F5F2EA;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600; border-bottom:1px solid #EDE7DB;">NW-4104</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44; border-bottom:1px solid #EDE7DB;">Fleet maintenance</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700; border-bottom:1px solid #EDE7DB;">$620.00</td>
          </tr>
          <tr style="background-color:#FFFFFF;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600; border-bottom:1px solid #EDE7DB;">NW-4105</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44; border-bottom:1px solid #EDE7DB;">Expedited shipping</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700; border-bottom:1px solid #EDE7DB;">$1,180.00</td>
          </tr>
          <tr style="background-color:#F5F2EA;">
            <td style="padding:13px 16px; font-size:13px; color:#123A2E; font-weight:600;">NW-4106</td>
            <td style="padding:13px 8px; font-size:13px; color:#3E4A44;">Packaging &amp; handling</td>
            <td style="padding:13px 16px; text-align:right; font-family:Georgia,serif; font-size:13px; color:#123A2E; font-weight:700;">$340.00</td>
          </tr>
          <tr style="background-color:#0E2E24;">
            <td colspan="2" style="padding:15px 16px; font-size:12px; letter-spacing:1px; color:#E2A87B; text-transform:uppercase; font-weight:700;">Total — July 2026</td>
            <td style="padding:15px 16px; text-align:right; font-family:Georgia,serif; font-size:17px; color:#FFFFFF; font-weight:700;">$7,270.00</td>
          </tr>
Want the full MJML?Open Invoice Statement Email Template free in the editor to copy the complete, production-ready source — and customize it with drag-and-drop.Get the full MJML — it's free

Browse more templates

Receipt / Payment Email TemplatesTransactional Email TemplatesFinancial Email TemplatesOrder Email TemplatesAll Email Templates

Similar receipt / payment templates