.webp)
A well-designed invoice makes billing information clear and easy to read. In this project, you will create a static invoice HTML template using HTML5 and CSS3. The design includes business details, client information, an itemized billing table, invoice totals, and payment instructions in a professional layout.
This responsive invoice template uses fixed sample content that you can customize directly in the HTML file. Separate HTML and CSS files make it easy to change the text, colors, spacing, and branding. A dedicated print stylesheet also prepares the invoice for A4 printing.
What you will build
You will build a static, printable invoice design featuring:
A business logo or text wordmark and company contact details.
Invoice number, issue date, and due date.
A client billing information section.
A table displaying five sample invoice items.
Fixed subtotal, tax, and total amounts.
Bank details, payment terms, and notes.
A thank-you message and minimal footer.
A responsive layout for different screen sizes.
A clean A4-friendly print layout.
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="A professional, printable invoice template for freelance and small business services.">
<title>Invoice INV-2026-042 | Forma Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize your business name and contact details. -->
<header class="header">
<div>
<div class="wordmark"><span class="mark" aria-hidden="true">f.</span> forma<span class="studio">studio</span></div>
<address>Forma Studio LLC<br>125 Design Avenue, Suite 200<br>Austin, TX 78701, USA<br>hello@forma.example<br>+1 (512) 555-0142</address>
</div>
<div class="invoice-meta">
<p class="eyebrow">BILLING / OCTOBER 2026</p>
<h1 id="invoice-title">INVOICE</h1>
<!-- Customize the invoice reference and dates. -->
<dl>
<div><dt>Invoice number</dt><dd>INV-2026-042</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-16">October 16, 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-10-30">October 30, 2026</time></dd></div>
</dl>
</div>
</header>
<!-- Customize the client's billing details and project name. -->
<section class="billing" aria-labelledby="bill-to">
<div>
<h2 id="bill-to">Bill to</h2>
<p class="client">Northstar Collective</p>
<address>Attn: Jamie Parker<br>480 Market Street<br>San Francisco, CA 94105, USA<br>accounts@northstar.example</address>
</div>
<div class="project"><h2>Project</h2><p>Brand & website refresh</p><span>All amounts in USD</span></div>
</section>
<!-- Edit the five fixed line items and update all totals manually. -->
<table>
<caption class="sr-only">Invoice services and charges in US dollars</caption>
<colgroup><col class="description"><col><col><col></colgroup>
<thead><tr><th scope="col">Item description</th><th scope="col">Qty</th><th scope="col">Unit price</th><th scope="col">Amount</th></tr></thead>
<tbody>
<tr><th scope="row">Brand discovery<span>Strategy workshop & creative direction</span></th><td>1</td><td>$450.00</td><td>$450.00</td></tr>
<tr><th scope="row">Visual identity design<span>Logo suite, color palette & typography</span></th><td>1</td><td>$750.00</td><td>$750.00</td></tr>
<tr><th scope="row">Website page design<span>Responsive layouts for key pages</span></th><td>3</td><td>$250.00</td><td>$750.00</td></tr>
<tr><th scope="row">Social media templates<span>Reusable branded post templates</span></th><td>5</td><td>$60.00</td><td>$300.00</td></tr>
<tr><th scope="row">Final asset handoff<span>Organized files & usage guidelines</span></th><td>1</td><td>$150.00</td><td>$150.00</td></tr>
</tbody>
</table>
<section class="summary" aria-label="Invoice totals">
<dl class="totals">
<div><dt>Subtotal</dt><dd>$2,400.00</dd></div>
<div><dt>Tax (10%)</dt><dd>$240.00</dd></div>
<div class="total"><dt>Total due <span>USD</span></dt><dd>$2,640.00</dd></div>
</dl>
</section>
<div class="details">
<!-- Replace the fictional bank information with your payment details. -->
<section aria-labelledby="payment-title">
<h2 id="payment-title">Payment details</h2>
<dl class="bank">
<div><dt>Bank</dt><dd>Example Business Bank</dd></div>
<div><dt>Account name</dt><dd>Forma Studio LLC</dd></div>
<div><dt>Account number</dt><dd>000123456789</dd></div>
<div><dt>Routing number</dt><dd>000000000</dd></div>
<div><dt>Reference</dt><dd>INV-2026-042</dd></div>
</dl>
</section>
<!-- Customize your notes and agreed payment terms. -->
<section aria-labelledby="terms-title">
<h2 id="terms-title">Notes & terms</h2>
<p>Payment is due within 14 days of the issue date. Please include the invoice number as your payment reference.</p>
<p>For billing questions, contact hello@forma.example.</p>
</section>
</div>
<footer><p>Thank you for your business.</p><span>Forma Studio LLC <span aria-hidden="true">·</span> Thoughtful design. Lasting impact.</span></footer>
</main>
</body></html>CSS source
/* Customize the palette here. */
:root { --ink: #18243b; --muted: #667085; --accent: #4f46b9; --line: #e3e6ed; }
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 20px; background: #f3f4f7; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.6; }
.invoice { max-width: 794px; margin: auto; padding: 48px; background: #fff; border-top: 5px solid var(--accent); box-shadow: 0 12px 48px #18243b0a; }
.header, .billing { display: flex; justify-content: space-between; gap: 32px; }
.header { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 26px; font-weight: 750; letter-spacing: -1px; }
.mark { display: inline-grid; place-items: center; width: 35px; height: 35px; background: var(--accent); border-radius: 9px; color: #fff; }
.studio { margin-left: -4px; color: var(--muted); font-weight: 400; }
address { color: var(--muted); font-style: normal; }
.invoice-meta { min-width: 260px; text-align: right; }
.eyebrow, h2 { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
h1 { margin: 4px 0 20px; font-size: 36px; line-height: 1.2; letter-spacing: 2px; }
dl, p { margin: 0; }
dl > div { display: flex; justify-content: space-between; gap: 20px; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 500; }
.billing { padding: 28px 0; }
h2 { margin-bottom: 10px; }
.client { margin-bottom: 4px; font-size: 16px; font-weight: 650; }
.project { text-align: right; }
.project p { font-weight: 600; }
.project span { color: var(--muted); font-size: 11px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.description { width: 52%; }
thead { background: #f5f5fa; }
th, td { padding: 14px 10px; text-align: right; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .5px; }
th:first-child { text-align: left; }
tbody th { font-size: 12px; font-weight: 600; }
tbody th span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
td { white-space: nowrap; font-size: 12px; }
.summary { display: flex; justify-content: flex-end; padding: 22px 0 28px; }
.totals { width: 290px; font-variant-numeric: tabular-nums; }
.totals > div { padding: 6px 10px; }
.totals .total { margin-top: 10px; padding: 14px 12px; background: #f1f0fc; border-radius: 5px; align-items: center; }
.total dt { color: var(--ink); font-weight: 650; }
.total dt span { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.total dd { color: var(--accent); font-size: 23px; font-weight: 700; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; }
.bank > div { gap: 12px; padding: 2px 0; }
.bank dd { text-align: right; }
.details p { color: var(--muted); }
.details p + p { margin-top: 10px; }
footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
footer p { font-size: 15px; font-weight: 600; }
footer > span { color: var(--muted); font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media screen and (max-width: 600px) {
body { padding: 16px 8px; }
.invoice { padding: 26px 18px; }
.header, .billing { flex-direction: column; gap: 24px; }
.invoice-meta, .project { min-width: 0; text-align: left; }
.invoice-meta dl { max-width: 320px; }
h1 { font-size: 30px; }
.description { width: 43%; }
th, td { padding: 12px 4px; }
thead th { font-size: 8px; letter-spacing: 0; }
tbody th, td { font-size: 10px; }
tbody th span { font-size: 9px; }
.details { grid-template-columns: 1fr; gap: 24px; }
.bank { max-width: 320px; }
}
/* Print using A4 paper; browser-added headers and footers can be disabled. */
@page { size: A4 portrait; margin: 14mm; }
@media print {
body { padding: 0; background: #fff; font-size: 11px; }
.invoice { width: 100%; max-width: none; margin: 0; padding: 7mm 5mm; box-shadow: none; }
.header { padding-bottom: 22px; }
.billing { padding: 22px 0; }
th, td { padding-top: 12px; padding-bottom: 12px; }
.details { gap: 24px; }
.header, .billing, tr, .summary, .details, footer { break-inside: avoid; }
thead { display: table-header-group; }
button, .print-button { display: none !important; }
.mark, thead, .total { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
JavaScript source
How it works
The project uses index.html for the invoice content and style.css for its appearance and print formatting. All details and amounts are edited manually in the source code.
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