Steps & wizards

Patterns for checkout, onboarding, and approvals using Bootstrap 5 utilities plus Elementer stepper styles under .steps-page-bs5. Surfaces, borders, and labels follow data-bs-theme for light and dark mode.

Accessibility

Expose progress with aria-label on the step list, aria-current="step" on the active step, and keep focus order logical when steps are interactive. Pair visual states (.is-active, .is-complete) with the same information in text.

Progress docs

Horizontal track

Numbered circles + connector

Four equal steps with a shared rail on sm+; stacks cleanly on narrow viewports.

  1. Cart
    Items locked
  2. Shipping
    EU · standard
  3. 3
    Payment
    Card on file
  4. 4
    Confirm
    Review order

Vertical timeline

Gradient spine

  • Discovery

    Stakeholder interviews and success metrics captured.

  • Design

    Figma library + responsive breakpoints signed off.

  • 3
    Build

    Sprint 3 · component QA in staging.

  • 4
    Launch

    Feature flag rollout and analytics validation.

Wizard shell

Step content + actions

Typical panel for the active step: short form copy and primary / secondary navigation.

Ribbon checkout

Segmented bar

Compact “breadcrumb-like” steps with .active and .done states — inspired by classic checkout, rebuilt with theme tokens.

Pill filters

Step chips

Use as filters or shallow wizard stages; keyboard-friendly when using button.

Underline tabs

Minimal step labels

Pair with tab panels or swap content in your app router; markup here is visual only.

Bootstrap progress

Bar + step labels

Native .progress for deterministic completion; labels stay aligned in a responsive row.

60%
Kickoff
Spec
Build
QA

Card grid

Per-step tiles

Each phase is a card; highlight the current step with border-primary and a badge.

Done

Research

Competitive matrix and user journeys.

Done

IA

Sitemap + navigation model.

Current

UI system

Tokens, components, documentation site.

Upcoming

Rollout

Training deck and changelog.

Fixed dark canvas

Stepper on charcoal

Independent of document theme — use for embedded widgets or “always dark” previews.

  1. Sync
    Repositories linked
  2. 2
    Configure
    Rules & webhooks
  3. 3
    Verify
    Test event

Breadcrumb trail

Micro-positioning

Bootstrap .breadcrumb for shallow hierarchies — not a wizard, but often shown above one.

Combine steppers with .list-group for selectable rows, .modal for focused substeps, and .toast for async validation feedback.