Stepper

Code Examples

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

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

The Stepper shows progression through a process.

Information

  • Uses the aria role of "tablist" for accessibility reasons.
  • Users can use the arrow keys to tab through the steps.
  • Pressing "enter" on a step will select that step.

Restrictions

  • Has a minimum of three items.
  • Only one step can be selected at a time.

Configurable Variables

Variable Default Description
$sprk-stepper-bg transparent Sets the background color of the stepper.
$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-hoverg $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 $sprk-white 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-bg-selected $sprk-white The background color of a selected step's content box 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.

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 sprk-c-Stepper__step--first"
   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 sprk-c-Stepper__step--last"
       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>
          

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 sprk-c-Stepper__step--first"
   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 sprk-c-Stepper__step--last"
    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>
          

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 sprk-c-Stepper__step--first"
     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 sprk-c-Stepper__step--last"
    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 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 sprk-c-Stepper__step--first"
     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 sprk-c-Stepper__step--last"
    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>