root = Card([invoiceHeader, statusTag, separator1, amountAndDue, separator2, itemsSection, actions, paymentNote])
invoiceHeader = CardHeader("Invoice #1024", "Avery Studio → Northwind Co.")
statusTag = Tag("Payment due", null, null, "warning")
separator1 = Separator()
amountAndDue = Card([amountSection, dueSection], "card", "row", "l")
amountSection = Card([amountLabel, amountValue], "sunk", "column", "xs")
amountLabel = TextContent("Amount due", "small")
amountValue = TextContent("$2,450.00 USD", "large-heavy")
dueSection = Card([dueLabel, dueValue, dueMeta], "sunk", "column", "xs")
dueLabel = TextContent("Due date", "small")
dueValue = TextContent("March 15, 2025", "default")
dueMeta = TextContent("Issued March 1, 2025 · Net 14", "small")
separator2 = Separator()
itemsSection = Card([itemsHeading, itemsTable, totalText], "clear", "column", "m")
itemsHeading = Heading("Line items", "h3")
itemsTable = Table([itemCol, qtyCol, amountCol])
itemCol = Col("Service", ["Web design", "Development", "Revisions"])
qtyCol = Col("Qty", [1, 1, 1])
amountCol = Col("Amount", ["$1,200.00", "$950.00", "$300.00"])
totalText = TextContent("Total: **$2,450.00**", "default")
actions = Buttons([payBtn, downloadBtn], "row")
payBtn = Button("Pay now", null, "primary", null, "large")
downloadBtn = Button("Download PDF", null, "secondary")
paymentNote = Callout("info", "Payment", "Pay securely by card or bank transfer. You'll receive a receipt by email once the payment is confirmed.")