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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<ol class="steps steps-9a1e5cb4 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">
						<h3 class="fw-steps__title">Plan</h3>
						<div class="fw-steps__text">
							<p>Map out the pages and the content you need.</p>
						</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">
						<h3 class="fw-steps__title">Build</h3>
						<div class="fw-steps__text">
							<p>Drag sections, columns and elements into place.</p>
						</div>
					</div></li>
				</ol>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free