root = Card([header, progressSection, modulesSection, nextLesson, ratingSection, continueButtons], "card", "column", "l")
header = CardHeader("The Product Designer's Toolkit", "Instructor: Sarah Kim")
progressSection = Card([progressHeading, progressBar, progressDetail], "sunk")
progressHeading = Heading("Your progress", "h3")
progressBar = Progress(63, "Overall progress")
progressDetail = TextContent("17 of 27 lessons complete · about 3 hours of content left", "small")
modulesSection = Card([modulesHeading, modulesTable], "sunk")
modulesHeading = Heading("Modules", "h3")
modulesTable = Table([moduleCol, lessonsCol, statusCol])
moduleCol = Col("Module", ["Module 1 · Design foundations", "Module 2 · Research methods", "Module 3 · Prototyping", "Module 4 · Handoff & delivery"])
lessonsCol = Col("Lessons", ["6/6", "7/7", "4/8", "0/6"])
statusCol = Col("Status", ["Complete", "Complete", "In progress", "Not started"])
nextLesson = Callout("info", "Next lesson", "Module 3 · Prototyping — Lesson 5: Interaction states in Figma. 12 minutes, resumes where you left off.")
ratingSection = Card([ratingHeading, ratingText, ratingChart], "sunk")
ratingHeading = Heading("Learner rating", "h3")
ratingText = TextContent("**4.8 out of 5** — average across 2,431 ratings")
ratingChart = HorizontalBarChart(ratingLabels, [ratingSeries])
ratingLabels = ["5 stars", "4 stars", "3 stars", "2 stars", "1 star"]
ratingSeries = Series("Share of ratings", [78, 16, 4, 1, 1])
continueButtons = Buttons([continueBtn, browseBtn])
continueBtn = Button("Continue learning", null, "primary", "normal", "large")
browseBtn = Button("Browse all lessons", null, "secondary")