siimple css v3.3.0 GitHub Examples Home
Steps
A simple step wizard progress indicator.
Added in v3.2.0
This is an experimental work in progress. There are some features that may not work properly in all browsers.
To start creating a steps wizard indicator, add a siimple-steps class to a div element. Each step must be added as a children with the class siimple-steps-item, and can contain the following child elements:
  • siimple-steps-item-bubble to display the step bubble.
  • siimple-steps-item-title to display a title of the step.
  • siimple-steps-item-description to display a description of the step.
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
<div class="siimple-steps siimple-steps--primary">
    <div class="siimple-steps-item">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 1</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
    <div class="siimple-steps-item">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 2</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
    <div class="siimple-steps-item">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 3</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
</div>
You can set the current step adding a siimple-steps-item--current class to a step item element.
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
<div class="siimple-steps siimple-steps--primary">
    ...
    <div class="siimple-steps-item siimple-steps-item--current">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 2</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
    ...
</div>
Step colors
Change the color of the steps adding a siimple-steps--{color} class to the steps container:
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
<div class="siimple-steps siimple-steps--primary">
    ...
</div>
<div class="siimple-steps siimple-steps--success">
    ...
</div>
<div class="siimple-steps siimple-steps--warning">
    ...
</div>
<div class="siimple-steps siimple-steps--error">
    ...
</div>
Step icons
Display an icon in each step bubble adding a siimple-steps-item--exclamation, siimple-steps-item--check or siimple-steps-item--error class to the parent step item element.
Step 1
Step description content
Step 2
Step description content
Step 3
Step description content
<div class="siimple-steps siimple-steps--primary">
    <div class="siimple-steps-item siimple-steps-item--check">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 1</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
    <div class="siimple-steps-item siimple-steps-item--current siimple-steps-item--exclamation">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 2</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
    <div class="siimple-steps-item siimple-steps-item--cross">
        <div class="siimple-steps-item-bubble"></div>
        <div class="siimple-steps-item-title">Step 3</div>
        <div class="siimple-steps-item-description">Step description content</div>
    </div>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.