SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Steps

Overview

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Default Steps
1

Step 1

This is the first step of the process.

2

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

4

Step 4

Final step. You have completed all the previous steps and end the process. 

<div class="sgds-steps">
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      1
    </div>
    <div class="sgds-step-details">
      <h4>Step 1</h4>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">2</div>
    <div class="sgds-step-details">
      <h4>Step 2</h4>
      <p>
        This is the second step. You get here once you have completed the
        first step.
      </p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">3</div>
    <div class="sgds-step-details">
      <h4>Step 3</h4>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      4
    </div>
    <div class="sgds-step-details">
      <h4>Step 4</h4>
      <p>
        Final step. You have completed all the previous steps and end the
        process.
      </p>
    </div>
  </div>
</div>
Activate the step marker with sgds-step-item is-active class
1

Step 1

This is the first step of the process.

2

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

4

Step 4

Final step. You have completed all the previous steps and end the process. 

<div class="sgds-steps">
  <!-- Add is-active class here -->
  <div class="sgds-step-item is-active">
    <div class="sgds-step-marker">
      1
    </div>
    <div class="sgds-step-details">
      <h4>Step 1</h4>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">2</div>
    <div class="sgds-step-details">
      <h4>Step 2</h4>
      <p>
        This is the second step. You get here once you have completed the first
        step.
      </p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">3</div>
    <div class="sgds-step-details">
      <h4>Step 3</h4>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      4
    </div>
    <div class="sgds-step-details">
      <h4>Step 4</h4>
      <p>
        Final step. You have completed all the previous steps and end the
        process.
      </p>
    </div>
  </div>
</div>
Add sgds-step-item is-completed after the step is completed
1

Step 1

This is the first step of the process.

2

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

4

Step 4

Final step. You have completed all the previous steps and end the process. 

<div class="sgds-steps">
  <!-- Add is-completed class here -->
  <div class="sgds-step-item is-completed">
    <div class="sgds-step-marker">1</div>
    <div class="sgds-step-details">
      <h4>Step 1</h4>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="sgds-step-item is-active">
    <div class="sgds-step-marker">2</div>
    <div class="sgds-step-details">
      <h4>Step 2</h4>
      <p>
        This is the second step. You get here once you have completed the
        first step.
      </p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">3</div>
    <div class="sgds-step-details">
      <h4>Step 3</h4>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      4
    </div>
    <div class="sgds-step-details">
      <h4>Step 4</h4>
      <p>
        Final step. You have completed all the previous steps and end the
        process.
      </p>
    </div>
  </div>
</div>

Or mark completed steps with an icon:

Step 1

This is the first step of the process.

2

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

4

Step 4

Final step. You have completed all the previous steps and end the process. 

<div class="sgds-steps">
  <div class="sgds-step-item is-completed">
    <div class="sgds-step-marker">
      <!-- replace number with sgds-icon -->
      <span class="sgds-icon sgds-icon-check"></span>
    </div>
    <div class="sgds-step-details">
      <h4>Step 1</h4>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="sgds-step-item is-active">
    <div class="sgds-step-marker">2</div>
    <div class="sgds-step-details">
      <h4>Step 2</h4>
      <p>
        This is the second step. You get here once you have completed the
        first step.
      </p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">3</div>
    <div class="sgds-step-details">
      <h4>Step 3</h4>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      4
    </div>
    <div class="sgds-step-details">
      <h4>Step 4</h4>
      <p>
        Final step. You have completed all the previous steps and end the
        process.
      </p>
    </div>
  </div>
</div>
You can also use the sgds-step-item is-*stateColor* to represent the active or completed state

Step 1

This is the first step of the process.

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

4

Step 4

Final step. You have completed all the previous steps and end the process. 

<div class="sgds-steps">
  <!-- Add is-*stateColor* class here -->
  <div class="sgds-step-item is-completed is-success">
    <div class="sgds-step-marker">
      <span class="sgds-icon sgds-icon-check"></span>
    </div>
    <div class="sgds-step-details">
      <h4>Step 1</h4>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <!-- Add is-*stateColor* class here -->
  <div class="sgds-step-item is-completed is-warning">
    <div class="sgds-step-marker"><span class="sgds-icon sgds-icon-check"></span></div>
    <div class="sgds-step-details">
      <h4>Step 2</h4>
      <p>
        This is the second step. You get here once you have completed the
        first step.
      </p>
    </div>
  </div>
  <div class="sgds-step-item is-active">
    <div class="sgds-step-marker">3</div>
    <div class="sgds-step-details">
      <h4>Step 3</h4>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="sgds-step-item">
    <div class="sgds-step-marker">
      4
    </div>
    <div class="sgds-step-details">
      <h4>Step 4</h4>
      <p>
        Final step. You have completed all the previous steps and end the
        process.
      </p>
    </div>
  </div>
</div>

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component