Present your billing details clearly with this professional invoice HTML template using HTML5 and CSS3. The design combines a clean white background, navy headings, subtle gray dividers, and neatly aligned columns for a polished corporate appearance.
This static invoice template suits freelancers, agencies, consultants, and small businesses. It includes company information, client details, an itemized billing table, fixed totals, and payment instructions. Separate HTML and CSS files make it easy to customize the content, branding, and layout directly in the source code.
What you will build
You will build a responsive, printable invoice template with a professional business layout. The design includes:
A company logo or wordmark with business contact details.
A prominent invoice heading.
Invoice number, issue date, and payment due date.
A clearly organized client billing section.
An itemized table with five sample service entries.
Right-aligned quantities, prices, and amounts.
Fixed subtotal, discount, and total due.
Bank details and a payment reference.
Payment terms, notes, and an authorized-signature line.
A thank-you message and billing enquiry details.
A responsive screen layout and A4-friendly print styles.
HTML source
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Professional invoice with itemized services, payment details, and billing terms.">
<title>Invoice INV-2026-014 — Northline Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<header class="invoice-header">
<!-- Customize: business wordmark and contact details. -->
<div class="business">
<p class="wordmark">NORTHLINE<span> STUDIO</span></p>
<address>
125 Market Street, Suite 400<br>
San Francisco, CA 94105<br>
hello@northline.example<br>
+1 (415) 555-0142<br>
www.northline.example
</address>
</div>
<div class="document-heading">
<p class="eyebrow">Professional services</p>
<h1 id="invoice-title">INVOICE</h1>
<p>INV-2026-014</p>
</div>
</header>
<section class="billing-grid" aria-label="Client and invoice details">
<!-- Customize: client billing details. -->
<div>
<h2>Bill to</h2>
<p class="client-name">Alex Morgan</p>
<address>
Meridian Technologies, Inc.<br>
680 Mission Street, Floor 3<br>
San Francisco, CA 94103<br>
accounts@meridian.example
</address>
</div>
<!-- Customize: invoice number, dates, and currency. -->
<dl class="invoice-details">
<div><dt>Invoice number</dt><dd>INV-2026-014</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-18">October 18, 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-11-02">November 2, 2026</time></dd></div>
<div><dt>Currency</dt><dd>USD — US Dollar</dd></div>
</dl>
</section>
<!-- Customize: fixed service items and amounts; update totals manually. -->
<div class="table-container" role="region" aria-labelledby="services-caption" tabindex="0">
<table>
<caption id="services-caption">Services & deliverables</caption>
<thead>
<tr>
<th scope="col" class="item-number">No.</th>
<th scope="col">Description</th>
<th scope="col" class="numeric">Qty</th>
<th scope="col" class="numeric">Unit price</th>
<th scope="col" class="numeric">Amount</th>
</tr>
</thead>
<tbody>
<tr><td class="item-number">01</td><td><strong>Discovery & strategy</strong><span>Project workshop and creative direction</span></td><td class="numeric">1.00</td><td class="numeric">$600.00</td><td class="numeric">$600.00</td></tr>
<tr><td class="item-number">02</td><td><strong>Brand identity design</strong><span>Visual identity and brand guidelines</span></td><td class="numeric">1.00</td><td class="numeric">$1,200.00</td><td class="numeric">$1,200.00</td></tr>
<tr><td class="item-number">03</td><td><strong>Website page design</strong><span>Responsive layouts for five key pages</span></td><td class="numeric">5.00</td><td class="numeric">$250.00</td><td class="numeric">$1,250.00</td></tr>
<tr><td class="item-number">04</td><td><strong>Content refinement</strong><span>Editing and formatting of supplied copy</span></td><td class="numeric">4.00</td><td class="numeric">$75.00</td><td class="numeric">$300.00</td></tr>
<tr><td class="item-number">05</td><td><strong>Project handover</strong><span>Final asset preparation and walkthrough</span></td><td class="numeric">1.00</td><td class="numeric">$150.00</td><td class="numeric">$150.00</td></tr>
</tbody>
</table>
</div>
<!-- Customize: subtotal, discount, and total due (static values). -->
<section class="totals" aria-label="Invoice totals">
<dl>
<div><dt>Subtotal</dt><dd>$3,500.00</dd></div>
<div><dt>Discount (10%)</dt><dd>−$350.00</dd></div>
<div class="total-due"><dt>Total due</dt><dd>$3,150.00</dd></div>
</dl>
</section>
<!-- Customize: sample bank details and payment reference. -->
<section class="payment" aria-labelledby="payment-title">
<h2 id="payment-title">Payment details</h2>
<p class="section-note">Please pay by bank transfer using the reference below.</p>
<dl class="payment-details">
<div><dt>Bank name</dt><dd>Example Commercial Bank</dd></div>
<div><dt>Account holder</dt><dd>Northline Studio LLC</dd></div>
<div><dt>Account number</dt><dd>000123456789</dd></div>
<div><dt>Payment reference</dt><dd>INV-2026-014</dd></div>
</dl>
</section>
<!-- Customize: payment terms, signature, and billing contact. -->
<footer class="invoice-footer">
<div class="footer-grid">
<section aria-labelledby="terms-title">
<h2 id="terms-title">Terms & notes</h2>
<p>Payment is due within 15 days of the issue date. Please include the invoice number with your transfer and email your remittance advice to our billing team.</p>
</section>
<div class="signature">
<div class="signature-line" aria-hidden="true"></div>
<p>Authorized signature</p>
<p class="signatory">Jordan Ellis · Director</p>
</div>
</div>
<p class="thank-you">Thank you for your business.</p>
<p class="billing-contact">Billing enquiries: billing@northline.example · +1 (415) 555-0142</p>
</footer>
</main>
</body></html>CSS source
/* Customize: brand colors, typography, and spacing. */
:root {
--color-navy: #172d47;
--color-text: #343b43;
--color-muted: #5f6974;
--color-accent: #285e91;
--color-line: #dce1e6;
--color-table: #f1f3f5;
--color-paper: #ffffff;
--color-screen: #edf0f3;
--font-family: Arial, Helvetica, sans-serif;
--font-size: 13px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--page-padding: 16mm;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: var(--space-7) var(--space-4);
background: var(--color-screen);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size);
line-height: 1.55;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.invoice {
width: 100%;
max-width: 210mm;
min-height: 297mm;
margin: 0 auto;
padding: var(--page-padding);
background: var(--color-paper);
box-shadow: 0 5px 28px rgb(23 45 71 / 9%);
}
p, h1, h2, dl { margin: 0; }
address { font-style: normal; overflow-wrap: anywhere; }
h1, h2, strong { color: var(--color-navy); }
h2 {
margin-bottom: var(--space-3);
font-size: 11px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.invoice-header {
display: flex;
justify-content: space-between;
gap: var(--space-5);
padding-bottom: var(--space-6);
border-bottom: 2px solid var(--color-navy);
}
.wordmark { margin-bottom: var(--space-4); color: var(--color-navy); font-size: 21px; font-weight: 700; letter-spacing: 1px; }
.wordmark span { color: var(--color-accent); font-weight: 400; }
.business address { font-size: 12px; color: var(--color-muted); }
.document-heading { text-align: right; }
.eyebrow { color: var(--color-muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
h1 { margin: var(--space-2) 0; font-size: 36px; line-height: 1.2; letter-spacing: 2px; }
.document-heading > p:last-child { color: var(--color-accent); font-weight: 700; }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin: var(--space-6) 0; }
.client-name { margin-bottom: var(--space-1); color: var(--color-navy); font-size: 15px; font-weight: 700; }
.invoice-details { align-self: start; }
.invoice-details > div, .totals dl > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; }
dt { color: var(--color-muted); }
dd { margin: 0; }
.invoice-details dd { text-align: right; font-weight: 700; }
.table-container { width: 100%; overflow-x: auto; }
.table-container:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 12px; }
caption { padding-bottom: var(--space-3); color: var(--color-navy); font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-align: left; text-transform: uppercase; }
th { background: var(--color-table); color: var(--color-navy); font-size: 11px; font-weight: 700; }
th, td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
td strong { display: block; font-size: 12px; font-weight: 700; }
td span { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: 11px; }
.item-number { width: 7%; color: var(--color-muted); }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals { width: 46%; margin: var(--space-5) 0 var(--space-6) auto; font-variant-numeric: tabular-nums; }
.totals dd { white-space: nowrap; }
.totals .total-due { margin-top: var(--space-3); padding: var(--space-3) 0; border-top: 2px solid var(--color-navy); border-bottom: 1px solid var(--color-navy); font-size: 17px; font-weight: 700; }
.total-due dt, .total-due dd { color: var(--color-navy); }
.payment { padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.section-note { margin-bottom: var(--space-3); color: var(--color-muted); font-size: 12px; }
.payment-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); font-size: 12px; }
.payment-details dt { margin-bottom: 2px; font-size: 11px; }
.payment-details dd { font-weight: 700; overflow-wrap: anywhere; }
.invoice-footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); }
.footer-grid section p { color: var(--color-muted); font-size: 11px; }
.signature { align-self: end; text-align: center; font-size: 11px; }
.signature-line { height: 28px; margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-muted); }
.signatory { color: var(--color-muted); font-size: 10px; }
.thank-you { margin-top: var(--space-6); color: var(--color-navy); font-size: 14px; font-weight: 700; }
.billing-contact { margin-top: var(--space-1); color: var(--color-muted); font-size: 10px; overflow-wrap: anywhere; }
@media screen and (max-width: 700px) {
body { padding: var(--space-4); }
.invoice { min-height: auto; padding: var(--space-5); }
.invoice-header { gap: var(--space-4); }
.wordmark { font-size: 17px; }
h1 { font-size: 28px; }
.billing-grid { gap: var(--space-5); }
.invoice-details > div { display: block; margin-bottom: var(--space-2); }
.invoice-details dd { text-align: left; }
.totals { width: 60%; }
}
@media screen and (max-width: 480px) {
body { padding: var(--space-2); }
.invoice { padding: var(--space-5) var(--space-4); }
.invoice-header { flex-direction: column; }
.document-heading { text-align: left; }
.billing-grid, .payment-details, .footer-grid { grid-template-columns: 1fr; }
.invoice-details > div { display: flex; margin-bottom: 0; }
.invoice-details dd { text-align: right; }
.totals { width: 100%; }
.signature { width: 200px; max-width: 100%; margin-top: var(--space-2); }
}
@page { size: A4 portrait; margin: 14mm; }
@media print {
:root { --color-muted: #444444; --color-line: #bcbcbc; }
body { padding: 0; background: #ffffff; font-size: 11px; }
.invoice { max-width: none; width: 100%; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
.invoice-header { padding-bottom: var(--space-5); }
.billing-grid { margin: var(--space-5) 0; }
.table-container { overflow: visible; }
table { min-width: 0; table-layout: fixed; }
th, td { padding: 10px 6px; overflow-wrap: anywhere; }
th:nth-child(2) { width: 42%; }
th:nth-child(3) { width: 11%; }
th:nth-child(4), th:nth-child(5) { width: 20%; }
.numeric { white-space: normal; }
thead { display: table-header-group; }
tr, .totals, .payment, .footer-grid { break-inside: avoid; page-break-inside: avoid; }
h2, caption { break-after: avoid; }
.totals { margin-bottom: var(--space-5); }
.invoice-footer { margin-top: var(--space-5); }
}
JavaScript source
How it works
The project uses index.html for the invoice structure and style.css for its design, responsive behavior, and print formatting. All business details, invoice items, and totals are updated manually in the HTML file.
Try a change
Choose Edit code, make a small change, then press Run to preview it.
Use the source Copy buttons, choose Edit code to open the editor, or Download ZIP to save the project after a six-second countdown.
Discussion (0)
Leave a comment