Numbered Steps

Ordered 3-up (or N-up) list with accent-circle number badges. Perfect for "How we work" / "Our process" sections.

numbered-steps foundation

Keywords

steps, process, how-it-works, numbered, timeline

Metadata

Slugnumbered-steps

Categoryfoundation

Default containerstandard

Statuspublished

Variants

layout horizontal · vertical

background light · alt · dark

size md · lg

Fields (7)

Eyebrow text
Heading text
Intro textarea
Layout button_group
Background button_group
Padding button_group
Steps repeater

Use in a mockup

Copy this as the wrapper in your mockup's HTML — fill the inner markup per the Mockup Spec.

<section class="section numbered-steps"
         data-block="numbered-steps"
         data-surface="light"
         data-layout="horizontal"
                  data-container="standard">
  <div class="container container--standard">
    <div class="numbered-steps__inner">
      <!-- block content -->
    </div>
  </div>
</section>