root = Card([header, special, menuSection, hoursSection])
header = CardHeader("The Daily Grind", "Cafe & Bakery · 21 Oak Street")
special = Callout("success", "Today's Special", "Pumpkin Spice Latte with oat milk — $4.50 (add a vegan cookie for $2)")
menuSection = Card([menuHeading, dietaryFilter, menuTabs], "clear")
menuHeading = Heading("Menu", "h2")
dietaryFilter = Card([filterLabel, veggieFilter], "sunk")
filterLabel = TextContent("Dietary filters", "small-heavy")
veggieFilter = CheckBoxGroup("dietary", [veggieOnly])
veggieOnly = CheckBoxItem("Vegetarian only", "Show only vegetarian dishes", "veggie")
menuTabs = Tabs([drinksTab, foodTab])
drinksTab = TabItem("drinks", "Drinks", [drinksNote, drinksTable])
drinksNote = TextContent("All drinks are vegetarian. Ask about oat, soy, or almond milk.", "small")
drinksTable = Table([drinkName, drinkPrice, drinkVeg])
drinkName = Col("Drink", ["Espresso", "Cappuccino", "Latte", "Matcha Latte", "Chai Tea", "House Drip Coffee", "Fresh Orange Juice"])
drinkPrice = Col("Price", ["$2.50", "$3.50", "$4.00", "$4.50", "$3.75", "$2.25", "$4.00"])
drinkVeg = Col("Vegetarian", ["Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes"])
foodTab = TabItem("food", "Food", [foodNote, foodTable])
foodNote = TextContent("Served all day. Gluten-free bread available on request.", "small")
foodTable = Table([foodName, foodPrice, foodVeg])
foodName = Col("Dish", ["Avocado Toast", "Caprese Sandwich", "Quiche of the Day", "Chicken Panini", "Veggie Burger", "Caesar Salad", "Tomato Basil Soup", "Blueberry Muffin"])
foodPrice = Col("Price", ["$8.50", "$9.00", "$7.25", "$10.50", "$11.00", "$9.50", "$6.50", "$3.75"])
foodVeg = Col("Vegetarian", ["Yes", "Yes", "Yes", "No", "Yes", "No", "Yes", "Yes"])
hoursSection = Card([hoursHeading, hoursTable], "sunk")
hoursHeading = Heading("Opening Hours", "h2")
hoursTable = Table([hoursDay, hoursTime])
hoursDay = Col("Day", ["Monday–Friday", "Saturday", "Sunday"])
hoursTime = Col("Hours", ["7:00 AM – 7:00 PM", "8:00 AM – 8:00 PM", "8:00 AM – 4:00 PM"])