root = Card([header, specialCallout, filtersCard, drinksCard, foodCard, hoursCard], "card", "column", "l")
header = CardHeader("The Daily Grind", "House-made drinks · fresh seasonal plates · open daily")
specialCallout = Callout("info", "Today's Special", "Truffle Mushroom Toast — wild mushrooms, truffle aioli, pickled shallots on sourdough. $12.50 · vegetarian 🌱")
filtersCard = Card([filtersHeading, filterForm], "sunk", "column", "m")
filtersHeading = Heading("Filters", "h3")
filterForm = Form("dietary-filter", filterActions, [filterField])
filterField = FormControl("Dietary preference", filterRadio, "Choosing Vegetarian only hides non-vegetarian items from the menus below")
filterRadio = RadioGroup("diet", [allOption, vegOption], "all")
allOption = RadioItem("All items", "Show the full menu", "all")
vegOption = RadioItem("Vegetarian only", "Show only vegetarian-friendly items", "vegetarian")
filterActions = Buttons([applyVegBtn, showAllBtn])
applyVegBtn = Button("Show vegetarian only", null, "primary")
showAllBtn = Button("Show all", null, "secondary")
drinksCard = Card([drinksHeading, drinksTable, drinksNote], "sunk", "column", "m")
drinksHeading = Heading("Drinks", "h2")
drinksTable = Table([drinkNameCol, drinkPriceCol])
drinkNameCol = Col("Drink", ["Espresso", "Cappuccino", "Latte", "Flat White", "Matcha Latte", "Hot Chocolate", "Iced Cold Brew", "Fresh Orange Juice"])
drinkPriceCol = Col("Price", ["$3.00", "$4.50", "$4.50", "$4.75", "$5.25", "$4.25", "$4.95", "$5.00"])
drinksNote = TextContent("All drinks are vegetarian-friendly 🌱", "small")
foodCard = Card([foodHeading, foodTable, foodTag], "sunk", "column", "m")
foodHeading = Heading("Food", "h2")
foodTable = Table([itemCol, foodPriceCol, vegCol])
itemCol = Col("Item", ["Avocado Toast", "Truffle Mushroom Toast (special)", "Butter Croissant", "Banana Bread", "Margherita Pizza", "Caesar Salad", "Smoked Salmon Bagel", "Veggie Burger", "Beef Burger"])
foodPriceCol = Col("Price", ["$11.50", "$12.50", "$3.75", "$4.25", "$13.00", "$10.50", "$11.00", "$13.50", "$14.50"])
vegCol = Col("Vegetarian", ["🌱 Yes", "🌱 Yes", "🌱 Yes", "🌱 Yes", "🌱 Yes", "No", "No", "🌱 Yes", "No"])
foodTag = TagBlock(["🌱 Vegetarian-friendly"])
hoursCard = Card([hoursHeading, hoursTable, hoursNote], "sunk", "column", "m")
hoursHeading = Heading("Opening Hours", "h2")
hoursTable = Table([dayCol, hoursCol])
dayCol = Col("Day", ["Monday – Friday", "Saturday", "Sunday"])
hoursCol = Col("Hours", ["7:00 – 18:00", "8:00 – 20:00", "8:00 – 16:00"])
hoursNote = TextContent("The kitchen closes 30 minutes before closing time.", "small")