> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formepdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Standard Invoice

> A one-page standard invoice in the Northmoor document system: masthead, four-column meta grid, itemised table, totals stack and an accent amount-due block.

<Frame caption="Standard Invoice — rendered output">
  <img src="https://mintcdn.com/dataferry/I-nCXjDKaxTBieX4/images/templates/invoice-standard/page-1.webp?fit=max&auto=format&n=I-nCXjDKaxTBieX4&q=85&s=db1c93d2401c572bbe183cebf8e8f541" alt="Standard Invoice, page 1" width="1100" height="1424" data-path="images/templates/invoice-standard/page-1.webp" />
</Frame>

A one-page standard invoice in the Northmoor document system: masthead, four-column meta grid, itemised table, totals stack and an accent amount-due block. Change the parties, line items and totals in index.html first (data.json mirrors every field). The footer is pushed to the page foot by a fixed-height flex column sized to Letter's content box; switch to A4 by changing @page size and the .pagefill height only.

**Engine features exercised:** @page margin boxes with counter(page)/counter(pages), border-collapse tables, flexbox with flex-grow, absolute positioning for the full-bleed head rule.

Render it:

```bash theme={null}
npx @formepdf/html templates/invoice-standard/index.html -o invoice-standard.pdf
```

<CodeGroup>
  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Invoice INV-4417 — Northmoor Industrial Group, Inc.</title>
  <link rel="stylesheet" href="../northmoor-shared.css">
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="sheet">
  <div class="atop"></div>
  <div class="pagefill">

  <header>
    <div class="hd">
      <div class="mast-left">
        <div class="mark">N</div>
        <div>
          <div class="wm">Northmoor</div>
          <div class="sub" style="margin-top: 3pt">Industrial Group, Inc.</div>
        </div>
      </div>
      <div class="addr" style="text-align: right">418 Ellingham Road, Suite 300<br>Rochester, NY 14604<br>(585) 274-0180<br>ar@northmoorgroup.com</div>
    </div>
    <div class="hr2 mast-divider"></div>

    <div class="dochead">
      <div>
        <div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Accounts receivable</div>
        <h1 class="dtitle">Invoice</h1>
      </div>
      <div style="text-align: right">
        <div class="lbl" style="margin-bottom: 5.25pt">Invoice number</div>
        <div class="refnum">INV-4417</div>
      </div>
    </div>
  </header>

  <div class="meta meta-invoice">
    <div><div class="lbl">Bill to</div>Brightwater Foods LLC<br>Accounts Payable<br>2140 Carnegie Avenue<br>Cleveland, OH 44115</div>
    <div><div class="lbl">Ship to</div>Brightwater Foods LLC<br>Plant 2 — Receiving Dock 4<br>3900 Harvard Road<br>Cleveland, OH 44105</div>
    <div><div class="lbl">Issued</div>07 September 2026<div class="lbl meta-gap">Terms</div>Net 30 days</div>
    <div><div class="lbl">Due</div>07 October 2026<div class="lbl meta-gap">Customer / PO</div>BW-0091 / 44-7712</div>
  </div>

  <table class="t items">
    <thead>
      <tr>
        <th scope="col" style="width: 33pt">Item</th>
        <th scope="col">Description</th>
        <th scope="col" class="num" style="width: 52.5pt">Qty</th>
        <th scope="col" style="width: 36pt">Unit</th>
        <th scope="col" class="num" style="width: 61.5pt">Rate</th>
        <th scope="col" class="num" style="width: 69pt">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>001</td><td>Fastener set, stainless 316, M8 × 40 mm, hex flange</td><td class="num">1,200</td><td>ea</td><td class="num">1.85</td><td class="num">2,220.00</td></tr>
      <tr><td>002</td><td>Gasket sheet, neoprene, 1/8 in × 36 in × 36 in</td><td class="num">24</td><td>sheet</td><td class="num">46.50</td><td class="num">1,116.00</td></tr>
      <tr><td>003</td><td>Conveyor belt lacing kit, No. 2 rivet, with tooling</td><td class="num">6</td><td>kit</td><td class="num">128.00</td><td class="num">768.00</td></tr>
      <tr><td>004</td><td>Outbound freight — LTL, Rochester to Cleveland</td><td class="num">1</td><td>lot</td><td class="num">214.75</td><td class="num">214.75</td></tr>
    </tbody>
  </table>

  <table class="tt">
    <tbody>
      <tr><td>Subtotal</td><td class="num">4,318.75</td></tr>
      <tr><td>Taxable goods 4,104.00 · NY sales tax 8.00%</td><td class="num">328.32</td></tr>
      <tr class="total"><td>Total</td><td class="num">4,647.07</td></tr>
    </tbody>
  </table>

  <div class="due">
    <span class="lbl" style="color: #111111">Amount due</span>
    <span class="due-figure">$4,647.07</span>
  </div>

  <div class="pagefill-spacer"></div>

  <footer class="foot">
    <div style="flex-grow: 1"><div class="lbl">Remit to</div>Northmoor Industrial Group, Inc. · First Genesee Bank, Rochester NY<br>Account 8841 002937 · Routing 021304559 · Reference INV-4417</div>
    <div style="flex-grow: 1"><div class="lbl">Terms</div>Payment due within 30 days of invoice date. Balances past due accrue interest at 1.5% per month. Title passes on delivery; claims for shortage must be filed within 10 days.</div>
  </footer>

  </div>
  </div>
  </body>
  </html>
  ```

  ```css style.css theme={null}
  /* invoice-standard — page geometry and document-specific rules.
   * Spine (type scale, components) comes from ../northmoor-shared.css. */

  @page {
    size: Letter;
    margin: 52.5pt 57pt 40.5pt; /* 70px 76px 54px at 0.75pt/px */
    @bottom-left {
      content: "Invoice INV-4417 · Brightwater Foods LLC";
      font-family: Helvetica, Arial, sans-serif;
      font-size: 5.625pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #8A857E;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-family: Helvetica, Arial, sans-serif;
      font-size: 5.625pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #8A857E;
    }
  }

  /* The 4px full-bleed accent head rule: escapes the content box into the
   * top margin with negative absolute offsets (the page has no clip). */
  .sheet { position: relative; }
  .atop {
    position: absolute;
    top: -52.5pt;
    left: -57pt;
    right: -57pt;
    height: 3pt; /* 4px */
    background-color: #7B2233;
  }

  .mast-divider { margin-top: 15pt; } /* 20px below masthead */
  .meta-invoice { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; }
  .items { margin-top: 22.5pt; } /* 30px */
  .meta-gap { margin-top: 10.5pt; } /* 14px between stacked meta pairs */
  ```
</CodeGroup>

Both files assume [`northmoor-shared.css`](https://github.com/formepdf/forme/blob/main/templates/northmoor-shared.css) alongside them — the set's shared spine (type scale, tables, signature blocks, the accent).

<Accordion title="Sample data (data.json)">
  ```json data.json theme={null}
  {
    "issuer": {
      "name": "Northmoor Industrial Group, Inc.",
      "address": "418 Ellingham Road, Suite 300, Rochester, NY 14604",
      "phone": "(585) 274-0180",
      "ein": "16-1904472",
      "bank": {
        "name": "First Genesee Bank, Rochester NY",
        "account": "8841 002937",
        "routing": "021304559"
      },
      "email": "ar@northmoorgroup.com"
    },
    "document": {
      "type": "invoice",
      "number": "INV-4417",
      "eyebrow": "Accounts receivable",
      "issued": "07 September 2026",
      "due": "07 October 2026",
      "terms": "Net 30 days",
      "customerPo": "BW-0091 / 44-7712"
    },
    "billTo": {
      "name": "Brightwater Foods LLC",
      "lines": [
        "Accounts Payable",
        "2140 Carnegie Avenue",
        "Cleveland, OH 44115"
      ]
    },
    "shipTo": {
      "name": "Brightwater Foods LLC",
      "lines": [
        "Plant 2 — Receiving Dock 4",
        "3900 Harvard Road",
        "Cleveland, OH 44105"
      ]
    },
    "items": [
      {
        "item": "001",
        "description": "Fastener set, stainless 316, M8 × 40 mm, hex flange",
        "qty": 1200,
        "unit": "ea",
        "rate": 1.85,
        "amount": 2220.0
      },
      {
        "item": "002",
        "description": "Gasket sheet, neoprene, 1/8 in × 36 in × 36 in",
        "qty": 24,
        "unit": "sheet",
        "rate": 46.5,
        "amount": 1116.0
      },
      {
        "item": "003",
        "description": "Conveyor belt lacing kit, No. 2 rivet, with tooling",
        "qty": 6,
        "unit": "kit",
        "rate": 128.0,
        "amount": 768.0
      },
      {
        "item": "004",
        "description": "Outbound freight — LTL, Rochester to Cleveland",
        "qty": 1,
        "unit": "lot",
        "rate": 214.75,
        "amount": 214.75
      }
    ],
    "totals": {
      "subtotal": 4318.75,
      "taxableBase": 4104.0,
      "taxRate": 0.08,
      "tax": 328.32,
      "total": 4647.07,
      "amountDue": 4647.07
    }
  }
  ```
</Accordion>

***

MIT-licensed, free to copy — [source on GitHub](https://github.com/formepdf/forme/tree/main/templates/invoice-standard). Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.
