Walkthrough

A flow of similar screens, one at a time. Needs a caption per screen. Without JS the figures stack.

Clean · light

Wireframe: product grid with a Compare checkbox on each card — Compare on each product

Wireframe: two products selected, with a comparison bar at the bottom — Comparison bar

Clean · dark

Vector

Comic

Markup contract

div.walkthrough[data-label] > .figure (2 or more, each with a caption).
Set `walkthrough` = { label, steps: [{ src, alt, caption }] }. The caption names the step.
assets/js/walkthrough.js adds .walkthrough__nav (.walkthrough__steps and .walkthrough__tip), wraps each figure in .walkthrough__screen and sets data-ready. Without it the figures stack.
In Markdown, write the same block by hand (see src/work/_template/).