Steps | siimple css

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.