root = Card([header, amountCard, invoiceDetails, actions, note])
header = CardHeader("Invoice #2024-058", "Studio North Design → Acme Corp")
amountCard = Card([amountLabel, amountValue, dueRow, statusBadge, progress], "sunk")
amountLabel = TextContent("Amount due", "small")
amountValue = Heading("$2,450.00", "h2")
dueRow = Card([dueLabel, dueDate], "clear", "row")
dueLabel = TextContent("Due date:", "default")
dueDate = TextContent("**June 30, 2025**", "default")
statusBadge = Tag("Due in 12 days", null, "sm", "warning")
progress = Progress(47, "47% paid · $1,150 received")
invoiceDetails = Card([detailsTitle, itemsTable], "sunk")
detailsTitle = Heading("Line items", "h3")
itemsTable = Table([itemCol, hoursCol, rateCol, totalCol])
itemCol = Col("Item", ["Brand identity design", "Landing page UI", "Project management"])
hoursCol = Col("Hours", [14, 25, 4])
rateCol = Col("Rate", ["$70/hr", "$50/hr", "$55/hr"])
totalCol = Col("Amount", ["$980", "$1,250", "$220"])
actions = Buttons([payBtn, messageBtn], "column")
payBtn = Button("Pay $2,450 now", null, "primary", "normal", "large")
messageBtn = Button("Ask a question", null, "secondary")
note = TextCallout("info", "Payment methods", "Pay by bank transfer, credit card, or PayPal. A 2.9% processing fee applies to credit card payments.")