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.

<div class="o-stepped-progress" data-o-component="o-stepped-progress">
  <ol class="o-stepped-progress__steps">
    <li>
      <a
        href="#edit"
        class="o-stepped-progress__step o-stepped-progress__step--complete"
      >
        <span class="o-stepped-progress__label">
          Step with icon
          <i
            class="o-icons-icon o-icons-icon--edit"
            style="width: 20px; height: 20px; vertical-align: middle"
            ><!-- Inline styles here should be in CSS or SCSS files when implementing --></i
          >
          <span class="o-stepped-progress__status">(completed)</span>
        </span>
      </a>
    </li>
    <li>
      <span class="o-stepped-progress__step o-stepped-progress__step--current">
        <span class="o-stepped-progress__label">
          Step with<br />multiple<br />line breaks
          <span class="o-stepped-progress__status">(current step)</span>
        </span>
      </span>
    </li>
    <li>
      <span class="o-stepped-progress__step">
        <span class="o-stepped-progress__label">
          Step with <strong>bold</strong> and <em>italic</em> text
        </span>
      </span>
    </li>
  </ol>
</div>
Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-stepped-progress

If using the Build Service, add o-stepped-progress@^2.0.7 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@^2.0.7".

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