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. 1 Account
2. 2 Profile
3. 3 Preferences
4. 4 Confirm

All completed

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

In a narrow container (vertical collapse)