Components

Steps / Process

A numbered steps / process flow — horizontal, vertical, alternating, cards or circles.

Live demo

See it in action

  1. 1

    Plan

    Map out the pages and the content you need.

  2. 2

    Build

    Drag sections, columns and elements into place.

  3. 3

    Style

    Tune colours, spacing and type with the design tokens.

  4. 4

    Publish

    Hit publish — your responsive page is live.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<ol class="steps steps-9bf2489e fw-steps fw-steps--design-horizontal design-horizontal fw-steps--marker-number fw-steps--shape-circle fw-steps--connector-solid" style="--st-count:2;">
		<li class="fw-steps__item">
		<div class="fw-steps__connector" aria-hidden="true">
		</div>
		<div class="fw-steps__marker">
			<span class="fw-steps__num">1</span>
		</div>
		<div class="fw-steps__body">
			<div class="steps-card__row steps-card-row--stack steps-card-j-start steps-card-a-start">
				<h3 class="fw-steps__title">Plan</h3>
			</div>
			<div class="steps-card__row steps-card-row--stack steps-card-j-start steps-card-a-start">
				<div class="fw-steps__text">
					<p>Map out the pages and the content you need.</p>
				</div>
			</div>
		</div></li>
		<li class="fw-steps__item">
		<div class="fw-steps__connector" aria-hidden="true">
		</div>
		<div class="fw-steps__marker">
			<span class="fw-steps__num">2</span>
		</div>
		<div class="fw-steps__body">
			<div class="steps-card__row steps-card-row--stack steps-card-j-start steps-card-a-start">
				<h3 class="fw-steps__title">Build</h3>
			</div>
			<div class="steps-card__row steps-card-row--stack steps-card-j-start steps-card-a-start">
				<div class="fw-steps__text">
					<p>Drag sections, columns and elements into place.</p>
				</div>
			</div>
		</div></li>
	</ol>
</section>

To learn more about the Steps / Process shortcode, please check out the online manual here.