Stepper

Code Examples

The Stepper displays a series of sequential steps with optional contextual descriptions.

Information

  • Users can use the arrow keys to tab through the steps.

Restrictions

  • Steppers must have a minimum of 2 items.
  • Only one step can be selected at a time.
  • The Stepper component should NOT be used as a progress indicator, as there is no way at this time to mark a step as "complete".
  • The React Stepper uses the index of its children to keep track of the active step. If you want to modify the index of the child steps (for example, to sort them or add more steps) you need to re-initialize the component so that it refreshes the internal indices.

Configurable Variables

Variable Default Description
$sprk-stepper-bg transparent Sets the background color of the stepper.
$sprk-stepper-breakpoint $sprk-split-breakpoint-xl Sets the minimum width at which the component switches between narrow and wide layouts.
$sprk-stepper-max-width 480px Sets the maximum width of the stepper.
$sprk-stepper-step-icon-border-width 2px Sets the border width of the stepper icons.
$sprk-stepper-icon-border-color $sprk-black-tint-50 The color of the border around the icon.
$sprk-stepper-icon-border-color-selected $sprk-green The color of the step icon when the step is selected.
$sprk-stepper-dark-icon-border-color $sprk-white The color of the icon border when the stepper is on a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-stepper-icon-height 16px The height of the step icon.
$sprk-stepper-icon-width 16px The width of the step icon.
$sprk-stepper-icon-color $sprk-white The color of the step icon.
$sprk-stepper-icon-color-hover $sprk-black-tint-50 The color of the step icon on hover.
$sprk-stepper-icon-color-selected $sprk-white The color of the step icon when the step is selected.
$sprk-stepper-dark-icon-color $sprk-blue The color of the step icon when the stepper has a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-stepper-dark-icon-color-selected $sprk-white The color of the step icon when the step is selected and the stepper has a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-stepper-dark-icon-color-hover $sprk-white The color of the step icon on hover when the stepper has a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-stepper-dark-icon-transition 0.3s all ease-in-out The transition state of the step icon.
$sprk-stepper-dark-icon-z-index $sprk-layer-height-xs The z-index value of the step icon.
$sprk-stepper-icon-box-shadow-selected-spread 8px The spread value of the icon box shadow when the step is selected.
$sprk-stepper-icon-box-shadow-selected 0 0 0 $sprk-stepper-step-icon-box-shadow-selected-spread $sprk-stepper-step-icon-border-color-selected The box shadow of the step icon when the icon is selected.
$sprk-stepper-step-content-bg transparent The background color of the content in the step.
$sprk-stepper-step-description-border-radius 5px The border radius of the step content box when it has a description.
$sprk-stepper-step-description-box-shadow 0 3px 18px 1px rgba(0,0,0,.08) The box shadow of the step content box when it has a description.
$sprk-stepper-step-description-top-spacing $sprk-space-m The spacing between the step heading and description.
$sprk-stepper-step-heading-font-weight 400 The font weight of the step heading.
$sprk-stepper-step-heading-size $sprk-font-size-display-six The font size of the step heading.
$sprk-stepper-step-heading-color $sprk-black The color of the step heading.
$sprk-stepper-dark-step-heading-color $sprk-white The color of the step heading when the stepper is on a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-stepper-step-heading-color-selected $sprk-black The color of the step heading when the step is selected.
$sprk-stepper-step-padding $sprk-space-misc-a The padding value for the step.
$sprk-stepper-step-content-bg-selected transparent The background color of the step content box when the step is selected.
$sprk-stepper-step-description-bg-selected $sprk-white The background color of the step content box when it has a description and when the step is selected.
$sprk-stepper-dark-step-description-selected $sprk-black The text color of a selected step's content and header when it has a description. This applies to steppers with the sprk-c-Stepper--has-dark-bg class.
$sprk-stepper-bar-color $sprk-black-tint-50 The color of the bar that connects the steps.
$sprk-stepper-dark-bar-color $sprk-white The color of the bar that connects the steps when the stepper is on a dark background (sprk-c-Stepper--has-dark-bg).
$sprk-carousel-dot-border $sprk-stepper-icon-border-width solid $sprk-stepper-dark-icon-border-color The border style for the dots under the carousel on mobile.
$sprk-carousel-dot-height 10px The height of the dots under the carousel on mobile.
$sprk-carousel-dot-width 10px The width of the dots under the carousel on mobile.
$sprk-carousel-wide-dot-height 10px The height of the dots under the carousel on mobile, after the $sprk-carousel-breakpoint.
$sprk-carousel-wide-dot-width 10px The width of the dots under the carousel on mobile, after the $sprk-carousel-breakpoint.
$sprk-carousel-dot-spacing $sprk-space-m The spacing around the dots under the carousel on mobile.
$sprk-carousel-wide-dot-spacing $sprk-carousel-dot-spacing The spacing around the dots under the carousel on mobile, after the $sprk-carousel-breakpoint.
$sprk-carousel-dot-selected $sprk-stepper-icon-box-shadow-selected The box shadow style applied to the selected dot.
$sprk-carousel-arrow-color $sprk-white The color of the arrow icons on either side of the carousel.
$sprk-carousel-arrow-spacing $sprk-space-m The spacing around the arrow icons on either side of the carousel.
$sprk-carousel-arrow-edge-spacing 0 The spacing applied between the arrows and the edge of the viewport, before the $sprk-carousel-breakpoint.
$sprk-carousel-arrow-padding $sprk-space-m The padding applied to the arrow icons on either side of the carousel.
$sprk-carousel-narrow-image-max-width 18.75rem The max width applied to the carousel image, before the $sprk-carousel-breakpoint.
$sprk-carousel-arrow-position-breakpoint 31.25rem The point at which the arrow icons stop being attached to the edges of the viewport.
$sprk-carousel-dot-container-padding $sprk-space-xs The padding applied to the dot container, under the carousel.
$sprk-carousel-breakpoint $sprk-split-breakpoint-xl The point when the carousel controls are no longer visible.

Class Modifiers

Class Description
.sprk-c-Stepper--has-dark-bg Use this when the stepper has a dark background color.
.sprk-c-Stepper__step--selected This gets added to the step when it is selected.
.sprk-c-Stepper__step-content--has-description Goes on the step content when the step has a description in addition to the step heading.
.sprk-c-Stepper--has-carousel Use this when the stepper is paired with a carousel.

This component is not currently available for Angular. Follow Spark Design System on Github.com for updates.

Stepper

<ol
 class="sprk-c-Stepper"
 data-sprk-stepper="container"
 data-id="stepper-1"
 role="tablist"
 aria-orientation="vertical"
>
  <li
   role="tab"
   class="sprk-c-Stepper__step"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step One
        </h3>
      </span>
    </div>
  </li>

  <li
   role="tab"
   class="sprk-c-Stepper__step sprk-c-Stepper__step--selected"
   aria-selected="true"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step Two
        </h3>
      </span>
    </div>
  </li>

  <li
   role="tab"
   class="sprk-c-Stepper__step"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step Three
        </h3>
      </span>
    </div>
  </li>
</ol>
          
<SprkStepper>
  <SprkStepperStep title="Step One"></SprkStepperStep>
  <SprkStepperStep title="Step Two"></SprkStepperStep>
  <SprkStepperStep title="Step Three"></SprkStepperStep>
</SprkStepper>

Information

See below for React properties for the SprkStepper component.

Property Type Description
additionalClasses string A space-delimited list of additional CSS classes that should be applied to the Stepper.
hasDarkBackground bool If true, the Stepper will be rendered on a dark background. ($sprk-blue)
idString string The value supplied will be assigned to the data-id attribute on the Stepper.

See below for React properties for the SprkStepperStep component.

Property Type Description
additionalClasses string A space-delimited list of additional CSS classes that should be applied to the StepperStep.
idString string The value supplied will be assigned to the data-id attribute on the StepperStep.
analyticsString string The value supplied will be assigned to the data-analytics attribute on the StepperStep.
title string The title of the step.
isSelected bool If true, this step will be selected when the component mounts. This property is changed automatically by the Stepper component when the keyboard is used to change the active step or when a step is clicked. Only one step can be selected at a time.
onClick function This callback function will be called when the StepperStep is clicked. Note that this function is called before the Stepper state is updated.

Stepper With Step Descriptions

<ol
 class="sprk-c-Stepper"
 data-sprk-stepper="container"
 data-id="stepper-1"
 role="tablist"
 aria-orientation="vertical"
>
  <li
   role="tab"
   class="sprk-c-Stepper__step sprk-c-Stepper__step--selected"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
      <span
       class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
       aria-controls="one-target-1"
       id="one-step-1"
       aria-selected="true"
      >
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step One
        </h3>
      </span>

      <div
       class="sprk-c-Stepper__step-description"
       data-sprk-stepper="description"
       id="one-target-1"
       aria-labelledby="one-step-1"
       role="tabpanel"
      >
        <p class="sprk-b-TypeBodyTwo">
          Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </li>

  <li
   role="tab"
   class="sprk-c-Stepper__step"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
      <span
       class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
       aria-controls="one-target-2"
       id="one-step-2"
      >
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step Two
        </h3>
      </span>

      <div
       class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
       data-sprk-stepper="description"
       aria-labelledby="one-step-2"
       id="one-target-2"
       role="tabpanel"
      >
        <p class="sprk-b-TypeBodyTwo">
          Step 2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </li>

  <li
   role="tab"
   class="sprk-c-Stepper__step"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
      <span
       class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
       aria-controls="one-target-3"
       id="one-step-3"
      >
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step Three
        </h3>
      </span>

      <div
       class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
       data-sprk-stepper="description"
       aria-labelledby="one-step-3"
       ids="one-target-3"
       role="tabpanel"
      >
        <p class="sprk-b-TypeBodyTwo">
          Step 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </li>

  <li
   role="tab"
   class="sprk-c-Stepper__step"
   data-sprk-stepper="step"
  >
    <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
      <span
       class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
       aria-controls="one-target-4"
       id="one-step-4"
      >
        <span class="sprk-c-Stepper__step-icon"></span>
        <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
          Step Four
        </h3>
      </span>

      <div
       class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
       data-sprk-stepper="description"
       aria-labelledby="one-step-4"
       id="one-target-4"
       role="tabpanel"
      >
        <p class="sprk-b-TypeBodyTwo">
          Step 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </li>
</ol>
          
<SprkStepper>
  <SprkStepperStep title="Step One">
    Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep
   title="Step Two"
   isSelected
  >
    Step 2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep title="Step Three">
    Step 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep title="Step Four">
    Step 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
</SprkStepper>

Stepper With Dark Background

<div class="sprk-u-BackgroundColor--blue sprk-o-Box sprk-o-Box--large">
  <ol
   class="sprk-c-Stepper sprk-c-Stepper--has-dark-bg "
   data-sprk-stepper="container"
   data-id="stepper-1"
   role="tablist"
   aria-orientation="vertical"
  >
    <li
     role="tab"
     aria-selected="true"
     class="sprk-c-Stepper__step sprk-c-Stepper__step--selected"
     data-sprk-stepper="step"
    >
      <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
        <span
         class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
         aria-controls="target-1"
         id="step-1"
        >
          <span class="sprk-c-Stepper__step-icon"></span>
          <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step One
          </h3>
        </span>

        <div
         class="sprk-c-Stepper__step-description"
         data-sprk-stepper="description"
         id="target-1"
         aria-labelledby="step-1"
         role="tabpanel"
        >
          <p class="sprk-b-TypeBodyTwo">
            Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </li>

    <li
     role="tab"
     class="sprk-c-Stepper__step"
     data-sprk-stepper="step"
    >
      <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
        <span
         class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
         aria-controls="target-2"
         id="step-2"
        >
          <span class="sprk-c-Stepper__step-icon"></span>
          <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Two
          </h3>
        </span>

        <div
         class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
         data-sprk-stepper="description"
         aria-labelledby="step-2"
         id="target-2"
         role="tabpanel"
        >
          <p class="sprk-b-TypeBodyTwo">
            Step 2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </li>

    <li
     role="tab"
     class="sprk-c-Stepper__step"
     data-sprk-stepper="step"
    >
      <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
        <span
         class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
         aria-controls="target-3"
         id="step-3"
        >
          <span class="sprk-c-Stepper__step-icon"></span>
          <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Three
          </h3>
        </span>

        <div
         class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
         data-sprk-stepper="description"
         aria-labelledby="step-3"
         id="target-3"
         role="tabpanel"
        >
          <p class="sprk-b-TypeBodyTwo">
            Step 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </li>

    <li
     role="tab"
     class="sprk-c-Stepper__step"
     data-sprk-stepper="step"
    >
      <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
        <span
         class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
         aria-controls="target-4"
         id="step-4"
        >
          <span class="sprk-c-Stepper__step-icon"></span>
          <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Four
          </h3>
        </span>

        <div
         class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
         data-sprk-stepper="description"
         aria-labelledby="step-4"
         id="target-4"
         role="tabpanel"
        >
          <p class="sprk-b-TypeBodyTwo">
            Step 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </li>
  </ol>

</div>
          
<SprkStepper hasDarkBackground>
  <SprkStepperStep title="Step One">
    Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep
   title="Step Two"
   isSelected
  >
    Step 2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep title="Step Three">
    Step 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
  <SprkStepperStep title="Step Four">
    Step 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </SprkStepperStep>
</SprkStepper>

React

  • React Steppers with Carousels are currently unavailable in Spark. Please use the vanilla framework for now.
<div class="sprk-u-BackgroundColor--blue sprk-o-Box sprk-o-Box--large">
  <div class="sprk-o-CenteredColumn sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--center-column sprk-o-Stack--split-reverse@xl">
    <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl">
      <div
       class="sprk-c-Carousel"
       data-sprk-carousel="stepper-carousel-01"
      >
        <div class="sprk-c-Carousel__controls sprk-o-Stack sprk-o-Stack--split@xxs sprk-o-Stack--center-row sprk-o-Stack--center-column">

          <button class="sprk-o-Stack__item sprk-c-Carousel__prev">
            <span class="sprk-u-ScreenReaderText">Previous Slide</span>
            <svg
             class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-c-Icon--l"
             viewBox="0 0 100 100"
            >
              <use xlink:href="#chevron-left" />
            </svg>
          </button>

          <div class="sprk-c-Carousel__frame">
            <ul class="sprk-c-Carousel__slides">
              <li class="sprk-c-Carousel__frame-item">
                <img src="../../../assets/toolkit/images/phone-shadow.png" alt="Cell phone with a blank screen.">
              </li>
              <li class="sprk-c-Carousel__frame-item">
                <img src="../../../assets/toolkit/images/phone-shadow.png" alt="Cell phone with a blank screen.">
              </li>
              <li class="sprk-c-Carousel__frame-item">
                <img src="../../../assets/toolkit/images/phone-shadow.png" alt="Cell phone with a blank screen.">
              </li>
              <li class="sprk-c-Carousel__frame-item">
                <img src="../../../assets/toolkit/images/phone-shadow.png" alt="Cell phone with a blank screen.">
              </li>
            </ul>
            <div
             class="sprk-c-Carousel__dots"
             data-sprk-carousel-dots="stepper-carousel-01"
            ></div>
          </div>

          <button class="sprk-o-Stack__item sprk-c-Carousel__next">
            <span class="sprk-u-ScreenReaderText">Next Slide</span>
            <svg
             class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-c-Icon--l"
             viewBox="0 0 100 100"
            >
              <use xlink:href="#chevron-right" />
            </svg>
          </button>

        </div>
      </div>
    </div>

    <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl">
      <ol
       class="sprk-c-Stepper sprk-c-Stepper--has-dark-bg sprk-c-Stepper--has-carousel"
       data-sprk-stepper="container"
       data-sprk-stepper-carousel="stepper-carousel-01"
       data-id="stepper-1"
       role="tablist"
       aria-orientation="vertical"
      >
        <li
         role="tab"
         aria-selected="true"
         class="sprk-c-Stepper__step sprk-c-Stepper__step--selected"
         data-sprk-stepper="step"
        >
          <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
            <span
             class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
             aria-controls="target-1"
             id="step-1"
            >
              <span class="sprk-c-Stepper__step-icon"></span>
              <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step One
          </h3>
            </span>

            <div
             class="sprk-c-Stepper__step-description"
             data-sprk-stepper="description"
             id="target-1"
             aria-labelledby="step-1"
             role="tabpanel"
            >
              <p class="sprk-b-TypeBodyTwo">
                Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
        </li>

        <li
         role="tab"
         class="sprk-c-Stepper__step"
         data-sprk-stepper="step"
        >
          <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
            <span
             class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
             aria-controls="target-2"
             id="step-2"
            >
              <span class="sprk-c-Stepper__step-icon"></span>
              <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Two
          </h3>
            </span>

            <div
             class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
             data-sprk-stepper="description"
             aria-labelledby="step-2"
             id="target-2"
             role="tabpanel"
            >
              <p class="sprk-b-TypeBodyTwo">
                Step 2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
        </li>

        <li
         role="tab"
         class="sprk-c-Stepper__step"
         data-sprk-stepper="step"
        >
          <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
            <span
             class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
             aria-controls="target-3"
             id="step-3"
            >
              <span class="sprk-c-Stepper__step-icon"></span>
              <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Three
          </h3>
            </span>

            <div
             class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
             data-sprk-stepper="description"
             aria-labelledby="step-3"
             id="target-3"
             role="tabpanel"
            >
              <p class="sprk-b-TypeBodyTwo">
                Step 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
        </li>

        <li
         role="tab"
         class="sprk-c-Stepper__step"
         data-sprk-stepper="step"
        >
          <div class="sprk-c-Stepper__step-content sprk-c-Stepper__step-content--has-description">
            <span
             class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain"
             aria-controls="target-4"
             id="step-4"
            >
              <span class="sprk-c-Stepper__step-icon"></span>
              <h3 class="sprk-c-Stepper__step-heading" data-sprk-stepper="heading">
            Step Four
          </h3>
            </span>

            <div
             class="sprk-c-Stepper__step-description sprk-u-HideWhenJs"
             data-sprk-stepper="description"
             aria-labelledby="step-4"
             id="target-4"
             role="tabpanel"
            >
              <p class="sprk-b-TypeBodyTwo">
                Step 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
        </li>
      </ol>

    </div>
  </div>
</div>