Keep your billing documents clear and professional with this minimal invoice HTML template using HTML5 and CSS3. The design uses a white background, clean typography, subtle dividers, and generous whitespace to make invoice details easy to read.
This static invoice template suits freelancers, consultants, agencies, and small businesses that prefer a simple presentation. It includes company information, client details, an itemized service table, fixed totals, and payment instructions. Separate HTML and CSS files make it easy to customize the content, typography, and spacing directly in the source code.
What you will build
You will build a responsive static invoice template with a clean, minimal layout. The design includes:
A business name or text wordmark with contact details.
A simple invoice heading.
Invoice number, issue date, and payment due date.
A clearly organized client billing section.
An itemized table containing five sample service entries.
Right-aligned quantities, prices, and amounts.
Fixed subtotal, discount, and total due.
Bank details and a payment reference.
Brief payment terms and a thank-you message.
A billing enquiry email.
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">
<meta name="description" content="A clear, itemized invoice for professional design services from North Studio.">
<title>Invoice NS-2026-018 — North Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize business identity and contact details. -->
<header class="invoice-header">
<div>
<p class="wordmark">North Studio</p>
<address>
42 Maple Street, Suite 200<br>
Portland, OR 97205<br>
hello@northstudio.example<br>
+1 (503) 555-0142<br>
northstudio.example
</address>
</div>
<h1 id="invoice-title">Invoice</h1>
</header>
<!-- Customize client details, invoice number, and dates. -->
<section class="invoice-details" aria-label="Billing and invoice information">
<div>
<h2>Bill to</h2>
<p class="client-name">Alex Morgan</p>
<address>
Fieldwork Co.<br>
180 Pine Avenue<br>
Seattle, WA 98101<br>
alex@fieldwork.example
</address>
</div>
<dl class="metadata">
<div><dt>Invoice number</dt><dd>NS-2026-018</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-19">October 19, 2026</time></dd></div>
<div><dt>Due date</dt><dd><time datetime="2026-11-02">November 2, 2026</time></dd></div>
<div><dt>Currency</dt><dd>USD</dd></div>
</dl>
</section>
<!-- Customize fixed line items; update every amount and total manually. -->
<div class="table-container" role="region" aria-label="Invoice items, scroll horizontally on smaller screens" tabindex="0">
<table>
<caption>Professional services · All amounts in USD</caption>
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col" class="number">Quantity</th>
<th scope="col" class="number">Unit price</th>
<th scope="col" class="number">Amount</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Discovery & consultation</th><td class="number">2.00</td><td class="number">150.00</td><td class="number">300.00</td></tr>
<tr><th scope="row">Brand identity design</th><td class="number">1.00</td><td class="number">1,200.00</td><td class="number">1,200.00</td></tr>
<tr><th scope="row">Website design</th><td class="number">5.00</td><td class="number">250.00</td><td class="number">1,250.00</td></tr>
<tr><th scope="row">Content preparation</th><td class="number">4.00</td><td class="number">100.00</td><td class="number">400.00</td></tr>
<tr><th scope="row">Project handover</th><td class="number">2.00</td><td class="number">125.00</td><td class="number">250.00</td></tr>
</tbody>
</table>
</div>
<!-- Customize fixed summary amounts; discount is 10% of subtotal. -->
<section class="totals" aria-label="Invoice totals in USD">
<dl>
<div><dt>Subtotal</dt><dd>$3,400.00</dd></div>
<div><dt>Discount (10%)</dt><dd>−$340.00</dd></div>
<div class="total-due"><dt>Total due</dt><dd>$3,060.00</dd></div>
</dl>
</section>
<!-- Replace sample banking details before sending. -->
<section class="payment" aria-labelledby="payment-title">
<h2 id="payment-title">Payment details</h2>
<dl>
<div><dt>Bank</dt><dd>Example Bank</dd></div>
<div><dt>Account holder</dt><dd>North Studio</dd></div>
<div><dt>Account number</dt><dd>0000 1234 5678</dd></div>
<div><dt>Payment reference</dt><dd>NS-2026-018</dd></div>
</dl>
</section>
<!-- Customize payment terms and billing contact. -->
<footer>
<p>Payment is due within 14 days of the issue date. Please include the invoice number as your payment reference.</p>
<p class="thanks">Thank you for your business.</p>
<p>Billing enquiries: billing@northstudio.example</p>
</footer>
</main>
</body></html>CSS source
/* Customize colors, typography, and spacing here. */
:root {
--color-paper: #ffffff;
--color-text: #191919;
--color-muted: #626262;
--color-line: #e3e3e3;
--font-family: Arial, Helvetica, sans-serif;
--font-size: 14px;
--font-small: 12px;
--line-height: 1.6;
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
--space-6: 56px;
--page-padding: 18mm;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: var(--space-5) var(--space-3);
background: var(--color-paper);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.invoice {
width: 100%;
max-width: 210mm;
min-height: 297mm;
margin-inline: auto;
padding: var(--page-padding);
background: var(--color-paper);
box-shadow: 0 4px 28px rgb(0 0 0 / 7%);
}
p, h1, h2, dl, dd { margin: 0; }
address { font-style: normal; overflow-wrap: anywhere; }
.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.wordmark { margin-bottom: var(--space-3); font-size: 18px; font-weight: 700; }
.invoice-header address { color: var(--color-muted); font-size: var(--font-small); }
h1 { font-size: 28px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
h2 { margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--font-small); font-weight: 400; }
.invoice-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.client-name { font-weight: 700; }
.metadata { align-self: start; }
.metadata > div, .payment dl > div, .totals dl > div {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-1);
}
dt { color: var(--color-muted); }
.metadata dt, .payment dt { font-size: var(--font-small); }
.metadata dd { text-align: right; }
.table-container { width: 100%; overflow-x: auto; }
.table-container:focus-visible { outline: 2px solid var(--color-muted); outline-offset: 4px; }
table { width: 100%; min-width: 540px; border-collapse: collapse; }
caption { padding-bottom: var(--space-3); color: var(--color-muted); font-size: var(--font-small); text-align: left; }
th, td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-line); text-align: left; }
thead th { padding-top: 0; color: var(--color-muted); font-size: var(--font-small); font-weight: 400; }
tbody th { font-weight: 400; }
th:first-child { padding-left: 0; width: 48%; }
th:last-child, td:last-child { padding-right: 0; }
.number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals { width: 46%; margin: var(--space-4) 0 var(--space-5) auto; font-variant-numeric: tabular-nums; }
.totals dd { text-align: right; white-space: nowrap; }
.totals .total-due { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: 18px; font-weight: 700; }
.total-due dt { color: var(--color-text); }
.payment { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.payment dl { max-width: 340px; }
.payment dl > div { justify-content: flex-start; }
.payment dt { flex: 0 0 120px; }
.payment dd { overflow-wrap: anywhere; }
footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--font-small); }
.thanks { margin-top: var(--space-3); color: var(--color-text); }
@media (max-width: 600px) {
body { padding: 0; }
.invoice { min-height: 100vh; padding: var(--space-4); box-shadow: none; }
.invoice-header { flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.invoice-details { grid-template-columns: 1fr; gap: var(--space-4); }
.metadata { max-width: 360px; }
.totals { width: 100%; max-width: 320px; }
}
@page { size: A4; margin: 15mm; }
@media print {
body { padding: 0; background: white; font-size: 10pt; }
.invoice { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
.invoice-header { flex-direction: row; margin-bottom: var(--space-5); }
.invoice-details { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.table-container { overflow: visible; }
table { min-width: 0; table-layout: fixed; }
th, td { padding-block: 12px; overflow-wrap: anywhere; }
.number { white-space: normal; }
thead { display: table-header-group; }
tr, .totals, .payment { break-inside: avoid; page-break-inside: avoid; }
.totals { width: 46%; max-width: none; }
footer { break-inside: avoid; }
}
JavaScript source
How it works
The project uses index.html for the invoice content and style.css for its appearance, responsive layout, and print formatting. All business details, invoice items, and amounts 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