About this set
Three sections that explain how a product works and why it beats the alternative. Three numbered steps joined by a line shows the path from sign-up to first payment, with a large numbered circle, a heading, a sentence and a time chip such as About 2 minutes for each step; the dashed line runs across on desktop and down the left side on phones. Sticky heading beside a numbered list keeps the headline and a call to action in view while four numbered steps of a home removal scroll past, each with a timing chip and a connecting line. Comparison table sets a spreadsheet against the product across six rows, mixing ticks, crosses and short text answers, with the product column tinted and a call to action underneath. The steps are an ordered list, so screen readers announce the step number and count, and the drawn numbers are hidden to avoid reading them twice. The comparison is a real table with a caption, column headers and row headers, wrapped in a focusable, labelled region that scrolls sideways if it ever needs to. Ticks and crosses are different shapes and carry hidden Included and Not included text.
What’s included
- Numbered steps with a dashed connector that turns vertical on phones
- Sticky heading column beside a four-step list with timing chips
- Comparison table with ticks, crosses and text answers in one column
- Steps marked up as an ordered list and the comparison as a real table
- Ticks and crosses use different shapes and hidden text, not only colour
- No JavaScript
Accessibility
Steps are an ol with h3 headings and the drawn numbers are aria-hidden. The comparison table has a caption, scope on its column and row headers, and Included or Not included text behind every icon, and its scroll wrapper is a labelled region that can take keyboard focus. Buttons and the table region show a 3px focus outline, and colour transitions stop under prefers-reduced-motion.
Customise it
Change --hw-accent, --hw-tint, --hw-line and --hw-radius on .hw; the time chip colours sit on .hw-time. In Bootstrap the table reads --bs-table-* variables and the buttons --bs-btn-*; in Tailwind swap the #0f766e and #ccfbf1 values.
