← All layouts  ·  Finance

receipt_long Invoice

A printable invoice with line items and totals.

Designed to survive being printed and emailed: no dependence on colour to carry meaning, totals aligned right, and the payment terms where an accounts department looks for them.

• .ms-btn
• .ms-card
• .ms-toolbar
• .ms-badge
• .ms-stat
• .ms-table

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<div class="u-container u-py-8" style="max-width:900px">
    <div class="ms-card ms-card--roomy">
        <div class="ms-toolbar">
            <div>
                <h1 style="margin:0">Invoice</h1>
                <p class="ms-stat__meta">Number 4471 &middot; Issued 22 August 2026</p>
            </div>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-badge ms-badge--warning">Due in 14 days</span>
        </div>

        <div class="u-grid u-grid-cols-12 u-mt-4">
            <div class="u-col-6">
                <strong>From</strong>
                <p>Northbound Ltd<br>Unit 4, Bridge Street<br>Kendal LA9 4AB<br>VAT GB 123 4567 89</p>
            </div>
            <div class="u-col-6">
                <strong>To</strong>
                <p>Fellside Outdoor<br>18 Market Place<br>Keswick CA12 5BJ</p>
            </div>
        </div>

        <div class="ms-table-responsive u-mt-4">
            <table class="ms-table">
                <thead><tr><th>Description</th><th class="u-text-right">Qty</th>
                    <th class="u-text-right">Unit</th><th class="u-text-right">Amount</th></tr></thead>
                <tbody>
                    <tr><td>Fell Jacket &mdash; wholesale</td><td class="u-text-right">24</td>
                        <td class="u-text-right">&pound;94.50</td><td class="u-text-right">&pound;2,268.00</td></tr>
                    <tr><td>Ridge Pack 30L &mdash; wholesale</td><td class="u-text-right">18</td>
                        <td class="u-text-right">&pound;65.00</td><td class="u-text-right">&pound;1,170.00</td></tr>
                    <tr><td>Carriage</td><td class="u-text-right">1</td>
                        <td class="u-text-right">&pound;48.00</td><td class="u-text-right">&pound;48.00</td></tr>
                </tbody>
                <tfoot>
                    <tr><td colspan="3" class="u-text-right">Subtotal</td><td class="u-text-right">&pound;3,486.00</td></tr>
                    <tr><td colspan="3" class="u-text-right">VAT at 20%</td><td class="u-text-right">&pound;697.20</td></tr>
                    <tr><th colspan="3" class="u-text-right">Total due</th>
                        <th class="u-text-right">&pound;4,183.20</th></tr>
                </tfoot>
            </table>
        </div>

        <div class="ms-card ms-card--flat u-mt-4">
            <strong>Payment terms</strong>
            <p>Net 14 days. Bank transfer to 20-00-00 / 12345678, quoting invoice 4471.
                Late payment interest applies at 8% above base rate.</p>
        </div>

        <div class="ms-toolbar u-mt-4">
            <button class="ms-btn ms-btn--primary">Send invoice</button>
            <button class="ms-btn ms-btn--outline">Download PDF</button>
            <button class="ms-btn ms-btn--ghost">Print</button>
        </div>
    </div>
</div>

More finance layouts