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>

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team