Navigation
14.9. Invoice Layout Component Reference
Reference the invoice layout components available in the designer and learn when to use sections, fields, tables, totals, images, and QR codes.
14.9. Invoice Layout Component Reference
Reference the invoice layout components available in the designer and learn when to use sections, fields, tables, totals, images, and QR codes.
14. Billing and ContractsUpdated: 5/3/2026
Invoice layouts are built from components. Each component has a business purpose: some organize the page, some display invoice data, some repeat line items, and some add branding or supporting information.
Use this reference when deciding what to add to a layout.
Structure components
| Component | Use it for | Example |
|---|---|---|
| Section | Group a major part of the invoice. | Header, billing summary, line items, footer. |
| Box Container | Arrange several items in a row, column, or grid. | Logo on the left and invoice number on the right. |
| Divider | Separate invoice areas visually. | Line between header and invoice details. |
| Spacer | Add intentional blank space. | Extra space before totals or payment instructions. |
Content components
| Component | Use it for | Example |
|---|---|---|
| Text Block | Static or mixed text. | “Thank you for choosing Northstar Managed IT.” |
| Data Field | A bound invoice value. | Invoice Number, Due Date, Customer Name, Total. |
| Field Label | A label next to a data field. | “Due Date” or “PO Number.” |
| Totals | A combined subtotal, tax, and total block. | Standard invoice total section. |
| Subtotal Row | A single subtotal line. | Show subtotal in a custom totals design. |
| Tax Row | A single tax line. | Show tax below subtotal. |
| Discount Row | A discount line. | Show contract discount or credit. |
| Custom Total Row | A custom summary line. | “Managed services total” or “Project total.” |
| Signature Block | A signature line when needed. | Project or quote-style signoff workflows. |
| Action Button | A visual button in supported document output. | “Pay Invoice” or “View Portal.” |
| Attachment List | List supporting attachments. | Project statement of work or supporting billing detail. |
Dynamic components
| Component | Use it for | Example |
|---|---|---|
| Line Items Table | Standard invoice line-item table. | Description, quantity, rate, and amount. |
| Dynamic Table | A repeating table bound to another collection. | Grouped usage rows or custom detail rows. |
Dynamic components are essential when the number of invoice rows changes from invoice to invoice.
Media components
| Component | Use it for | Example |
|---|---|---|
| Image | Add a stored image. | A remittance slip, certification badge, or document image. |
| Logo | Add your MSP logo. | Top-left branded invoice header. |
| QR Code | Add a scannable code. | Payment link, portal link, or reference link when supported. |
Recommended starter set
For a standard MSP invoice, begin with:
- Logo for branding.
- Text Block for your MSP name or payment message.
- Data Fields for invoice number, customer name, issue date, due date, and PO number.
- Line Items Table for services, time, usage, and recurring charges.
- Totals for subtotal, tax, and amount due.
- Text Block for payment instructions and support contact.
Keep the first version simple. Add advanced components only when they solve a real client billing need.