Origami Frontend Components & Services

Demos: o-stepped-progress

Stepped Progress

A basic stepped progress indicator, with completed and current steps. This demonstrates using stepped progress for a signup form.

<div class="o-stepped-progress" data-o-component="o-stepped-progress">
      <ol class="o-stepped-progress__steps">
        <li>
          <a href="#details" class="o-stepped-progress__step o-stepped-progress__step--complete">
            <span class="o-stepped-progress__label">
              Details
              <span class="o-stepped-progress__status">(completed)</span>
            </span>
          </a>
        </li>
        <li>
          <a href="#delivery" class="o-stepped-progress__step o-stepped-progress__step--complete">
            <span class="o-stepped-progress__label">
              Delivery
              <span class="o-stepped-progress__status">(completed)</span>
            </span>
          </a>
        </li>
        <li>
          <a href="#customise" class="o-stepped-progress__step o-stepped-progress__step--current">
            <span class="o-stepped-progress__label">
              Customise
              <span class="o-stepped-progress__status">(current step)</span>
            </span>
          </a>
        </li>
        <li>
          <span class="o-stepped-progress__step">
            <span class="o-stepped-progress__label"> Payment </span>
          </span>
        </li>
      </ol>
    </div>

Error Step

A stepped progress indicator with an errored step.

<div class="o-stepped-progress" data-o-component="o-stepped-progress">
      <ol class="o-stepped-progress__steps">
        <li>
          <a href="#details" class="o-stepped-progress__step o-stepped-progress__step--complete">
            <span class="o-stepped-progress__label">
              Details
              <span class="o-stepped-progress__status">(completed)</span>
            </span>
          </a>
        </li>
        <li>
          <a href="#delivery" class="o-stepped-progress__step o-stepped-progress__step--complete">
            <span class="o-stepped-progress__label">
              Delivery
              <span class="o-stepped-progress__status">(completed)</span>
            </span>
          </a>
        </li>
        <li>
          <a href="#customise" class="o-stepped-progress__step o-stepped-progress__step--error">
            <span class="o-stepped-progress__label">
              Customise <span class="o-stepped-progress__status">(error)</span>
            </span>
          </a>
        </li>
        <li>
          <span class="o-stepped-progress__step">
            <span class="o-stepped-progress__label"> Payment </span>
          </span>
        </li>
      </ol>
    </div>

HTML Labels

A stepped progress indicator with richer labels, using other components.

Status
active
Switch component view

GitHub Repository

Install o-stepped-progress

If using the Build Service, add o-stepped-progress@^3.0.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-stepped-progress@^3.0.0".

Help & Support

o-stepped-progress is maintained directly by the Origami team. If you have any questions about o-stepped-progress or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com