Search
Find
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.