Invoice
An invoice document with a header, line items, and totals.
A realistic invoice fits comfortably in one Joy DOM document. This use case shows a one-page invoice with a logo placeholder, sender/recipient blocks, a line-item table, totals, and a print rule that drops the background color.
Example
Acme Studio
Invoice
#2026-0042
Billed to
Globex Corp.
1 Market Street, SF
Due
2026-06-30
Design system audit
$4,800
Component library v1
$7,200
Subtotal
$12,000
Tax
$960
Total
$12,960
{ "version": 1, "style": { ".page": { "display": "flex", "flexDirection": "column", "fontFamily": "\"Geist\", ui-sans-serif, system-ui, sans-serif", "gap": { "value": 24, "unit": "px" }, "padding": { "value": 48, "unit": "px" }, "backgroundColor": "#ffffff" }, ".row": { "display": "flex", "flexDirection": "row", "justifyContent": "space-between" }, ".column": { "display": "flex", "flexDirection": "column", "gap": { "value": 4, "unit": "px" } }, ".logo": { "display": "flex", "fontSize": { "value": 24, "unit": "px" }, "fontWeight": "bold" }, ".label": { "display": "flex", "fontSize": { "value": 11, "unit": "px" }, "textTransform": "uppercase", "color": "#94a3b8", "letterSpacing": { "value": 1, "unit": "px" } }, ".value": { "display": "flex", "fontSize": { "value": 14, "unit": "px" }, "color": "#0f172a" }, ".divider": { "display": "flex", "borderColor": "#e2e8f0", "borderStyle": "solid", "borderWidth": { "value": 1, "unit": "px" } }, ".item": { "display": "flex", "flexDirection": "row", "justifyContent": "space-between", "padding": { "top": { "value": 8, "unit": "px" }, "right": { "value": 0, "unit": "px" }, "bottom": { "value": 8, "unit": "px" }, "left": { "value": 0, "unit": "px" } } }, ".totals": { "display": "flex", "flexDirection": "column", "gap": { "value": 4, "unit": "px" }, "alignSelf": "flex-end", "width": { "value": 240, "unit": "px" } }, ".total-row": { "display": "flex", "flexDirection": "row", "justifyContent": "space-between" }, ".grand": { "display": "flex", "fontSize": { "value": 18, "unit": "px" }, "fontWeight": "bold" }, "p": { "display": "flex" } }, "breakpoints": [ { "conditions": [ { "type": "type", "value": "print" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 24, "unit": "px" } } } }, { "conditions": [ { "type": "feature", "name": "width", "operator": "<", "value": 480, "unit": "px" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 24, "unit": "px" }, "gap": { "value": 20, "unit": "px" } }, ".totals": { "display": "flex", "width": { "value": 100, "unit": "%" } } } } ], "layout": { "type": "div", "props": { "className": [ "page" ] }, "children": [ { "type": "div", "props": { "className": [ "row" ] }, "children": [ { "type": "p", "props": { "className": [ "logo" ] }, "children": [ "Acme Studio" ] }, { "type": "div", "props": { "className": [ "column" ] }, "children": [ { "type": "p", "props": { "className": [ "label" ] }, "children": [ "Invoice" ] }, { "type": "p", "props": { "className": [ "value" ] }, "children": [ "#2026-0042" ] } ] } ] }, { "type": "div", "props": { "className": [ "row" ] }, "children": [ { "type": "div", "props": { "className": [ "column" ] }, "children": [ { "type": "p", "props": { "className": [ "label" ] }, "children": [ "Billed to" ] }, { "type": "p", "props": { "className": [ "value" ] }, "children": [ "Globex Corp." ] }, { "type": "p", "props": { "className": [ "value" ] }, "children": [ "1 Market Street, SF" ] } ] }, { "type": "div", "props": { "className": [ "column" ] }, "children": [ { "type": "p", "props": { "className": [ "label" ] }, "children": [ "Due" ] }, { "type": "p", "props": { "className": [ "value" ] }, "children": [ "2026-06-30" ] } ] } ] }, { "type": "div", "props": { "className": [ "divider" ] } }, { "type": "div", "props": { "className": [ "item" ] }, "children": [ { "type": "p", "children": [ "Design system audit" ] }, { "type": "p", "children": [ "$4,800" ] } ] }, { "type": "div", "props": { "className": [ "item" ] }, "children": [ { "type": "p", "children": [ "Component library v1" ] }, { "type": "p", "children": [ "$7,200" ] } ] }, { "type": "div", "props": { "className": [ "divider" ] } }, { "type": "div", "props": { "className": [ "totals" ] }, "children": [ { "type": "div", "props": { "className": [ "total-row" ] }, "children": [ { "type": "p", "children": [ "Subtotal" ] }, { "type": "p", "children": [ "$12,000" ] } ] }, { "type": "div", "props": { "className": [ "total-row" ] }, "children": [ { "type": "p", "children": [ "Tax" ] }, { "type": "p", "children": [ "$960" ] } ] }, { "type": "div", "props": { "className": [ "total-row", "grand" ] }, "children": [ { "type": "p", "children": [ "Total" ] }, { "type": "p", "children": [ "$12,960" ] } ] } ] } ] }}Design notes
- Every reusable structure is a class:
.page,.row,.column,.item,.total-row. No inline styles needed. - The label/value pairing pattern (uppercase muted label over a value) appears three times: on the invoice number, on the bill-to block, and on the due date. Same two classes drive all three.
- The print breakpoint tightens the page padding to
24px. Add more.page-level rules to that breakpoint if you want to drop colors entirely on paper.
Spec references: §5.4 Spacing · §5.2.6 justifyContent · §6 Breakpoints