Present your billing information with this professional invoice HTML template featuring solid color shapes. Built using HTML5 and CSS3, the design combines navy and teal geometric accents with a clean white background, clear typography, and neatly aligned invoice details.
This static invoice template suits freelancers, consultants, agencies, and small businesses. 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, brand colors, and decorative shapes directly in the source code.
What you will build
You will build a responsive static invoice template with a professional corporate layout and solid geometric accents. The design includes:
Overlapping navy and teal shapes in the header.
A matching diagonal color band along the bottom.
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 containing five sample service entries.
Right-aligned quantities, prices, and amounts.
Fixed subtotal, discount, and highlighted 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="A professional service invoice with billing details, itemized services, and payment information.">
<title>Invoice INV-2026-014 — Northline Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize the decorative polygon points and colors in style.css. -->
<div class="top-decoration" aria-hidden="true"><span></span></div>
<header class="invoice-header">
<!-- Customize business details. -->
<div class="business">
<p class="wordmark">NORTHLINE<span>STUDIO</span></p>
<address>
128 Westbridge Avenue, Suite 400<br>
Portland, OR 97205, USA<br>
hello@northline.example · +1 (503) 555-0148<br>
www.northline.example
</address>
</div>
<div class="document-heading">
<p class="eyebrow">Professional services</p>
<h1 id="invoice-title">INVOICE</h1>
<p>All amounts in USD</p>
</div>
</header>
<!-- Customize client and invoice information. -->
<section class="billing-grid" aria-label="Billing and invoice details">
<div>
<h2>Bill to</h2>
<p class="client-name">Olivia Bennett</p>
<address>
Meridian Collective<br>
76 Market Street, Floor 2<br>
Seattle, WA 98101, USA<br>
olivia@meridian.example
</address>
</div>
<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-19">19 Oct 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-11-02">02 Nov 2026</time></dd></div>
</dl>
</section>
<!-- Customize fixed items and amounts manually; no automatic calculations. -->
<section class="services" aria-labelledby="services-title">
<h2 id="services-title">Services provided</h2>
<div class="table-scroll" role="region" aria-label="Itemized services, scroll horizontally on small screens" tabindex="0">
<table>
<caption class="visually-hidden">Invoice services and amounts in US dollars</caption>
<thead><tr><th scope="col">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>01</td><th scope="row">Brand discovery workshop<small>Strategy, positioning, and creative direction</small></th><td class="numeric">1.00</td><td class="numeric">$600.00</td><td class="numeric">$600.00</td></tr>
<tr><td>02</td><th scope="row">Visual identity design<small>Logo suite and brand color system</small></th><td class="numeric">1.00</td><td class="numeric">$1,200.00</td><td class="numeric">$1,200.00</td></tr>
<tr><td>03</td><th scope="row">Website page design<small>Responsive layouts for core pages</small></th><td class="numeric">3.00</td><td class="numeric">$350.00</td><td class="numeric">$1,050.00</td></tr>
<tr><td>04</td><th scope="row">Social media templates<small>Branded, reusable campaign assets</small></th><td class="numeric">5.00</td><td class="numeric">$60.00</td><td class="numeric">$300.00</td></tr>
<tr><td>05</td><th scope="row">Brand guidelines document<small>Usage standards and final asset handoff</small></th><td class="numeric">1.00</td><td class="numeric">$250.00</td><td class="numeric">$250.00</td></tr>
</tbody>
</table>
</div>
</section>
<div class="settlement-grid">
<!-- Customize payment instructions. -->
<section class="payment" aria-labelledby="payment-title">
<h2 id="payment-title">Payment information</h2>
<dl>
<div><dt>Bank</dt><dd>Westbridge Bank</dd></div>
<div><dt>Account holder</dt><dd>Northline Studio LLC</dd></div>
<div><dt>Account number</dt><dd>0123 4567 8901</dd></div>
<div><dt>Payment reference</dt><dd>INV-2026-014</dd></div>
</dl>
</section>
<!-- Update totals manually when changing items. -->
<section class="summary" aria-label="Invoice totals in USD">
<dl>
<div><dt>Subtotal</dt><dd>$3,400.00</dd></div>
<div><dt>Discount (5%)</dt><dd>−$170.00</dd></div>
<div class="total"><dt>Total due <small>USD</small></dt><dd>$3,230.00</dd></div>
</dl>
</section>
</div>
<!-- Customize notes, terms, and signature details. -->
<footer class="invoice-footer">
<div class="footer-grid">
<section class="notes" aria-labelledby="notes-title">
<h2 id="notes-title">Notes & terms</h2>
<p>Payment is due within 14 days of the issue date. Please include the invoice number with your bank transfer.</p>
<p>This invoice covers the services listed above. No tax is charged.</p>
</section>
<div class="signature"><p>Alex Morgan</p><span>Authorized signature</span></div>
</div>
<p class="thanks">Thank you for your business.</p>
<p class="enquiries">Billing enquiries: billing@northline.example · +1 (503) 555-0148</p>
</footer>
<div class="bottom-decoration" aria-hidden="true"><span></span></div>
</main>
</body></html>CSS source
/* Customize brand colors, typography, and spacing here. */
:root {
--navy: #172d45;
--teal: #087f83;
--muted: #566573;
--line: #dce3e8;
--paper: #ffffff;
--canvas: #edf1f4;
--font: Arial, Helvetica, sans-serif;
--text: 13px;
--space: 8px;
--page-padding: 44px;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 36px 16px; background: var(--canvas); color: var(--navy); font-family: var(--font); font-size: var(--text); line-height: 1.6; }
.invoice { position: relative; isolation: isolate; width: 100%; max-width: 210mm; min-height: 297mm; margin: 0 auto; padding: 100px var(--page-padding) 66px; background: var(--paper); box-shadow: 0 12px 48px #172d4520; }
/* Decorations occupy reserved areas above and below all content. */
.top-decoration { position: absolute; top: 0; right: 0; width: 280px; height: 75px; background: var(--navy); clip-path: polygon(12% 0, 100% 0, 100% 100%, 55% 100%); }
.top-decoration span { position: absolute; inset: 0; background: var(--teal); clip-path: polygon(52% 0, 100% 0, 100% 100%); }
.bottom-decoration { position: absolute; bottom: 0; left: 0; width: 100%; height: 24px; background: var(--navy); clip-path: polygon(0 0, 65% 0, 70% 45%, 100% 45%, 100% 100%, 0 100%); }
.bottom-decoration span { position: absolute; inset: 0; background: var(--teal); clip-path: polygon(0 0, 34% 0, 39% 100%, 0 100%); }
p, dl { margin: 0; }
address { font-style: normal; color: var(--muted); overflow-wrap: anywhere; }
h1 { margin: 0; font-size: 40px; line-height: 1.2; letter-spacing: 3px; }
h2 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.7px; color: var(--teal); }
.invoice-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.wordmark { border-left: 5px solid var(--teal); padding-left: 12px; margin-bottom: 16px; font-size: 23px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.15; }
.wordmark span { display: block; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 5px; }
.document-heading { text-align: right; flex-shrink: 0; }
.document-heading > p { color: var(--muted); font-size: 11px; }
.document-heading .eyebrow { margin-bottom: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0 32px; }
.client-name { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.invoice-details { align-self: center; }
.invoice-details div, .payment dl div, .summary dl div { display: flex; justify-content: space-between; gap: 16px; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 600; }
.invoice-details div + div { margin-top: 9px; }
.invoice-details dd { text-align: right; }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: 12px; }
thead { background: var(--navy); color: var(--paper); }
th, td { padding: 14px 10px; text-align: left; }
thead th { font-size: 10px; letter-spacing: .5px; font-weight: 600; }
tbody td, tbody th { border-bottom: 1px solid var(--line); }
tbody th { font-weight: 600; width: 47%; }
tbody th small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: 10px; }
tbody td:first-child { color: var(--muted); }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.settlement-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin-top: 28px; }
.payment { font-size: 11px; }
.payment dl div { justify-content: flex-start; gap: 12px; margin-bottom: 5px; }
.payment dt { flex: 0 0 100px; }
.payment dd { overflow-wrap: anywhere; }
.summary dl > div { padding: 8px 12px; }
.summary dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary .total { padding: 0; margin-top: 8px; align-items: stretch; border: 1px solid var(--teal); }
.total dt { background: var(--teal); color: var(--paper); font-weight: 700; padding: 12px; flex: 1; }
.total dt small { display: block; font-size: 9px; letter-spacing: 1px; }
.total dd { display: flex; align-items: center; padding: 12px; font-size: 21px; }
.invoice-footer { margin-top: 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.notes p { font-size: 11px; color: var(--muted); }
.notes p + p { margin-top: var(--space); }
.signature { align-self: end; text-align: center; }
.signature p { padding-bottom: 10px; border-bottom: 1px solid var(--navy); font-size: 15px; }
.signature span { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.thanks { margin-top: 30px; font-weight: 700; font-size: 16px; color: var(--teal); }
.enquiries { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
:root { --page-padding: 24px; }
body { padding: 16px 8px; }
.invoice { min-height: auto; }
.invoice-header { align-items: flex-start; flex-direction: column; gap: 24px; }
.document-heading { text-align: left; }
h1 { font-size: 34px; }
.billing-grid, .settlement-grid, .footer-grid { grid-template-columns: 1fr; gap: 24px; }
.invoice-details { border-top: 1px solid var(--line); padding-top: 20px; }
.signature { width: 200px; margin-top: 12px; }
.top-decoration { width: 220px; }
}
@page { size: A4; margin: 12mm; }
@media print {
:root { --text: 10pt; --page-padding: 0; --muted: #394957; --line: #aab4bc; }
body { padding: 0; background: white; }
.invoice { width: 100%; max-width: none; min-height: 270mm; margin: 0; padding: 23mm 0 14mm; box-shadow: none; }
.invoice-header { flex-direction: row; align-items: center; }
.document-heading { text-align: right; }
.billing-grid { grid-template-columns: 1fr 1fr; }
.settlement-grid { grid-template-columns: 1.1fr 1fr; }
.footer-grid { grid-template-columns: 1.4fr 1fr; }
.invoice-details { padding-top: 0; border-top: 0; }
.table-scroll { overflow: visible; }
table { min-width: 0; font-size: 9pt; }
th, td { padding: 10px 8px; }
thead { display: table-header-group; background: white; color: var(--navy); border-block: 2px solid var(--navy); }
h2, .thanks { color: var(--navy); }
.total dt { background: white; color: var(--navy); border-right: 1px solid var(--navy); }
.summary .total { border-color: var(--navy); }
.total dd { font-size: 16pt; }
tr, .summary, .payment, .footer-grid { break-inside: avoid; page-break-inside: avoid; }
h2 { break-after: avoid; }
.signature { width: auto; margin-top: 0; }
}
JavaScript source
How it works
The project uses index.html for the invoice content and style.css for its design, 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