Stepper

A horizontal multi-step indicator with CSS-only connectors. States: completed, current, upcoming. Collapses to vertical below 36rem via container queries.

Horizontal (default)

1. 1Account
2. 2Profile
3. 3Preferences
4. 4Confirm

All completed

1. 1Step one
2. 2Step two
3. 3Step three

In a narrow container (vertical collapse)