master brand internal brand whitelabel brand

o-stepped-progress

Track progress through a multi-step process, such as a form

GitHub
active

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>
Bower Dependencies
o-colors ^4.7.7
o-icons ^5.8.0
o-normalise ^1.6.2
o-typography ^5.7.8

Support

Email origami.support@ft.com

Slack #ft-origami

Report an issue on GitHub
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags. 

o-stepped-progress@^1.0.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-stepped-progress"@"^1.0.0"

For more information see the Origami build process.