Step timeline with lists

Walk learners through a procedure one clear step at a time. Each step sits on a vertical timeline as its own card, with a colored title, rich text before and after, and an optional list whose items each get a meaningful icon: ✓ allowed, ✗ not allowed, ⚠ warning, ⓘ information, → action, ★ key point, a neutral bullet, or automatic 1, 2, 3 numbering. It's ideal for setup guides, safety procedures, onboarding checklists, do/don't instructions and any process with tips and cautions along the way.

Choose how the steps appear: all at once, revealed as the learner scrolls, step by step with a Next button, as a collapsible accordion, or as a checklist that learners tick off as they go, with an optional progress bar and steps that can unlock one at a time. Decide whether the activity completes on display or only once every step has been seen, opened or checked. Give each step its own color, adjust the line, cards, icon colors and buttons to match your course, and reword every button and label for any language. The timeline picks up your course's heading and body fonts. Built for everyone: full keyboard navigation, screen-reader announcements, icons read aloud as words you choose (such as "Warning:" or "Not allowed:"), reduced-motion support and a layout that adapts down to mobile.