How It Works Sections
How it works sections with zigzag process timelines, taped sticky notes, pinned notebook notes, sticky scroll mockups, dotted curve illustrations, duration tags, and numbered step cards.
How to choose a how it works sectionWhich how it works section should I use?
Show the path
- How It Works Section With Zigzag Timeline
- Four named stages snake left then right. Duration tags sit on each card. Dates sit in the header. Use it for a case study process, not a feature grid.
- How It Works Section With Taped Sticky Notes
- Four tilted sticky notes sit on the page with washi tape. Use it for next steps after a sprint, not a dated timeline.
- How It Works Section With Dotted Curve Steps
- Three illustrated mockups sit under a dotted curve. Use it for a product walkthrough with drawings, not a dated timeline.
- How It Works Section With Sticky Scroll Mockups
- Left titles stick while three photographs swap on the right. Use it for a walkthrough, not a static step grid.
- How It Works Section With Pinned Notebook Notes
- Six pushpin notes sit on lined paper and snake left then right. Use it for a landing page map, not a four stage case study.