Open primary navigation
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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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
Switch component view

GitHub Repository

Install o-stepped-progress

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

If running a Manual Build, run npm install "o-stepped-progress@^1.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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com