root = Card([header, statusSection, trackingSection, etaSection, problemSection])
header = CardHeader("Delivery tracking", "Order #48291")
statusSection = Card([statusTitle, statusBadge, statusAlert], "sunk")
statusTitle = Heading("Current status", "h3")
statusBadge = Tag("In transit", null, "lg", "info")
statusAlert = TextCallout("info", "Package is on the move", "Your parcel left the regional hub and is heading to your local facility.")
trackingSection = Card([trackingTitle, timeline])
trackingTitle = Heading("Where it is now", "h3")
timeline = ListBlock([step1, step2, step3, step4], "number")
step1 = ListItem("Order placed", "Jan 12, 9:04 AM")
step2 = ListItem("Picked up", "Jan 13, 7:30 AM")
step3 = ListItem("Arrived at regional hub", "Jan 13, 2:15 PM")
step4 = ListItem("In transit to local facility", "Jan 14, 6:40 AM", null, "Current")
etaSection = Card([etaTitle, etaValue, etaNote])
etaTitle = Heading("Estimated delivery", "h3")
etaValue = TextContent("**Friday, January 16**", "large-heavy")
etaNote = TextContent("Delivery window: 9:00 AM – 12:00 PM")
problemSection = Card([problemTitle, problemForm])
problemTitle = Heading("Report a problem", "h3")
problemForm = Form("delivery-problem", problemButtons, [problemSelectField, problemDetailsField])
problemSelectField = FormControl("What's the issue?", problemSelect)
problemSelect = Select("problem_type", [optLate, optDamaged, optLost, optOther], "Choose an option")
optLate = SelectItem("late", "Delayed delivery")
optDamaged = SelectItem("damaged", "Package damaged")
optLost = SelectItem("lost", "Package lost")
optOther = SelectItem("other", "Something else")
problemDetailsField = FormControl("Details", problemDetails, "Optional — add any extra information")
problemDetails = TextArea("details", "Describe the problem…", 4)
problemButtons = Buttons([submitProblem])
submitProblem = Button("Submit report", null, "primary")