root = Card([header, thresholdCallout, searchSection, inventoryCard, followups], "card", "column", "l")
header = CardHeader("Low inventory", "Items with 20 or fewer units on hand")
thresholdCallout = Callout("warning", "Reorder threshold: 20 units", "Every item below is flagged because it has dropped to 20 units or fewer. Critical items are at 10 or fewer — reorder them first.")
searchSection = Card([searchForm], "sunk")
searchForm = Form("inventory-search", searchButtons, [searchField])
searchField = FormControl("Search items", searchInput, "Find by product name or SKU")
searchInput = Input("search", "e.g. keyboard, mouse, USB hub")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search", null, "primary")
clearBtn = Button("Clear", null, "secondary")
inventoryCard = Card([inventoryTitle, thresholdBadge, inventoryTable], "sunk", "column", "m")
inventoryTitle = Heading("Low stock items", "h3")
thresholdBadge = Badge("Reorder threshold: 20 units", "warning")
inventoryTable = Table([productCol, skuCol, remainingCol, statusCol, actionCol])
productCol = Col("Product", ["Mechanical Keyboard", "Wireless Mouse", "Desk Lamp", "USB-C Hub", "Laptop Stand"])
skuCol = Col("SKU", ["MK-88", "WM-24", "DL-42", "UH-17", "LS-09"])
remainingCol = Col("Remaining", [6, 8, 12, 14, 18], "number")
statusCol = Col("Status", ["Critical", "Critical", "Low", "Low", "Low"])
actionCol = Col("Action", ["Reorder", "Reorder", "Reorder", "Reorder", "Reorder"], "action")
followups = FollowUpBlock([f1, f2, f3])
f1 = FollowUpItem("Show only items below 10 units")
f2 = FollowUpItem("Raise the reorder threshold to 30 units")
f3 = FollowUpItem("Reorder all critical items")