{ "name": "invoice-line-items", "kind": "block", "primary": "card-ui", "page": "/catalog/ui-patterns/app/invoice-line-items/invoice-line-items.contents.html", "slots": [], "nested": [], "attrs": {}, "html": "\n
\n

Invoice #1042

\n

Due May 31, 2026

\n
\n
\n \n \n \n From\n Acme Corp\n billing@acme.io\n \n \n Bill to\n Sunrise Studio\n finance@sunrise.dev\n \n \n Issued\n May 15, 2026\n \n \n\n \n\n \n \n Item\n Qty\n Unit price\n Total\n \n\n \n\n \n \n \n \n Pro Plan (monthly)\n May 1 – May 31, 2026\n \n 1\n $49.00\n $49.00\n \n \n \n Extra seats (3)\n 3 additional user seats\n \n 3\n $12.00\n $36.00\n \n \n \n Storage add-on (50 GB)\n Additional object storage\n \n 1\n $9.00\n $9.00\n \n \n\n \n\n \n \n Subtotal\n $94.00\n \n \n Tax (8%)\n $7.52\n \n \n \n Total due\n $101.52\n \n \n \n
\n", "source": "catalog/ui-patterns/app/invoice-line-items/invoice-line-items.contents.html", "metadata": { "domain": "data", "description": "Invoice table with line items, quantities, unit prices, and total row. Card with invoice header, item rows, subtotal, tax, and total due.", "keywords": [ "invoice", "table", "line", "items", "quantities", "totals", "billing", "amount", "price", "quantity", "subtotal", "tax", "total-due", "payment", "invoice-number" ] }, "captured_at": "2026-06-07T19:28:13.657Z", "template": [ { "id": "badge", "component": "Badge", "size": "sm", "text": "Unpaid", "variant": "warning" }, { "id": "text", "component": "Text", "variant": "heading", "textContent": "Invoice #1042", "children": [ "badge" ] }, { "id": "text-2", "component": "Text", "variant": "body", "slot": "description", "textContent": "Due May 31, 2026" }, { "id": "header", "component": "Header", "children": [ "text", "text-2" ] }, { "id": "text-3", "component": "Text", "color": "subtle", "size": "sm", "textContent": "From" }, { "id": "text-4", "component": "Text", "weight": "semibold", "textContent": "Acme Corp" }, { "id": "text-5", "component": "Text", "color": "subtle", "size": "sm", "textContent": "billing@acme.io" }, { "id": "column-2", "component": "Column", "gap": "0", "children": [ "text-3", "text-4", "text-5" ] }, { "id": "text-6", "component": "Text", "color": "subtle", "size": "sm", "textContent": "Bill to" }, { "id": "text-7", "component": "Text", "weight": "semibold", "textContent": "Sunrise Studio" }, { "id": "text-8", "component": "Text", "color": "subtle", "size": "sm", "textContent": "finance@sunrise.dev" }, { "id": "column-3", "component": "Column", "gap": "0", "children": [ "text-6", "text-7", "text-8" ] }, { "id": "text-9", "component": "Text", "color": "subtle", "size": "sm", "textContent": "Issued" }, { "id": "text-10", "component": "Text", "textContent": "May 15, 2026" }, { "id": "column-4", "component": "Column", "gap": "0", "children": [ "text-9", "text-10" ] }, { "id": "grid", "component": "Grid", "columns": "3", "gap": "4", "children": [ "column-2", "column-3", "column-4" ] }, { "id": "divider", "component": "Divider" }, { "id": "text-11", "component": "Text", "color": "subtle", "size": "sm", "weight": "semibold", "textContent": "Item" }, { "id": "text-12", "component": "Text", "color": "subtle", "size": "sm", "weight": "semibold", "textContent": "Qty" }, { "id": "text-13", "component": "Text", "color": "subtle", "size": "sm", "weight": "semibold", "textContent": "Unit price" }, { "id": "text-14", "component": "Text", "color": "subtle", "size": "sm", "weight": "semibold", "textContent": "Total" }, { "id": "row", "component": "Row", "align": "center", "children": [ "text-11", "text-12", "text-13", "text-14" ] }, { "id": "divider-2", "component": "Divider" }, { "id": "text-15", "component": "Text", "weight": "semibold", "textContent": "Pro Plan (monthly)" }, { "id": "text-16", "component": "Text", "color": "subtle", "size": "sm", "textContent": "May 1 – May 31, 2026" }, { "id": "column-6", "component": "Column", "gap": "0", "grow": true, "children": [ "text-15", "text-16" ] }, { "id": "text-17", "component": "Text", "color": "subtle", "size": "sm", "textContent": "1" }, { "id": "text-18", "component": "Text", "color": "subtle", "size": "sm", "textContent": "$49.00" }, { "id": "text-19", "component": "Text", "size": "sm", "weight": "semibold", "textContent": "$49.00" }, { "id": "row-2", "component": "Row", "align": "start", "children": [ "column-6", "text-17", "text-18", "text-19" ] }, { "id": "text-20", "component": "Text", "weight": "semibold", "textContent": "Extra seats (3)" }, { "id": "text-21", "component": "Text", "color": "subtle", "size": "sm", "textContent": "3 additional user seats" }, { "id": "column-7", "component": "Column", "gap": "0", "grow": true, "children": [ "text-20", "text-21" ] }, { "id": "text-22", "component": "Text", "color": "subtle", "size": "sm", "textContent": "3" }, { "id": "text-23", "component": "Text", "color": "subtle", "size": "sm", "textContent": "$12.00" }, { "id": "text-24", "component": "Text", "size": "sm", "weight": "semibold", "textContent": "$36.00" }, { "id": "row-3", "component": "Row", "align": "start", "children": [ "column-7", "text-22", "text-23", "text-24" ] }, { "id": "text-25", "component": "Text", "weight": "semibold", "textContent": "Storage add-on (50 GB)" }, { "id": "text-26", "component": "Text", "color": "subtle", "size": "sm", "textContent": "Additional object storage" }, { "id": "column-8", "component": "Column", "gap": "0", "grow": true, "children": [ "text-25", "text-26" ] }, { "id": "text-27", "component": "Text", "color": "subtle", "size": "sm", "textContent": "1" }, { "id": "text-28", "component": "Text", "color": "subtle", "size": "sm", "textContent": "$9.00" }, { "id": "text-29", "component": "Text", "size": "sm", "weight": "semibold", "textContent": "$9.00" }, { "id": "row-4", "component": "Row", "align": "start", "children": [ "column-8", "text-27", "text-28", "text-29" ] }, { "id": "column-5", "component": "Column", "gap": "3", "children": [ "row-2", "row-3", "row-4" ] }, { "id": "divider-3", "component": "Divider" }, { "id": "text-30", "component": "Text", "color": "subtle", "textContent": "Subtotal" }, { "id": "text-31", "component": "Text", "textContent": "$94.00" }, { "id": "row-5", "component": "Row", "justify": "space-between", "children": [ "text-30", "text-31" ] }, { "id": "text-32", "component": "Text", "color": "subtle", "textContent": "Tax (8%)" }, { "id": "text-33", "component": "Text", "textContent": "$7.52" }, { "id": "row-6", "component": "Row", "justify": "space-between", "children": [ "text-32", "text-33" ] }, { "id": "divider-4", "component": "Divider" }, { "id": "text-34", "component": "Text", "weight": "semibold", "textContent": "Total due" }, { "id": "text-35", "component": "Text", "weight": "semibold", "textContent": "$101.52" }, { "id": "row-7", "component": "Row", "justify": "space-between", "children": [ "text-34", "text-35" ] }, { "id": "column-9", "component": "Column", "gap": "1", "children": [ "row-5", "row-6", "divider-4", "row-7" ] }, { "id": "column", "component": "Column", "gap": "4", "children": [ "grid", "divider", "row", "divider-2", "column-5", "divider-3", "column-9" ] }, { "id": "section", "component": "Section", "children": [ "column" ] }, { "id": "root", "component": "Card", "children": [ "header", "section" ] } ] }