CSS
JS
Steps
Steps convey progress through numbered steps.
Usage
To get the default style for this component you just have to add the .steps-container
class to a <ul>
tag and .steps-stage
to an <li>
children.
For the active steps use .active
and for the current step use .current
.
1
Order Received
em 01/05/2017
em 01/05/2017
2
Separate order
em 01/05/2017
em 01/05/2017
3
Order dispatched
em 01/05/2017
em 01/05/2017
4
Order delivered
em 01/05/2017
em 01/05/2017
<ul class="steps-container">
<li class="steps-stage active">
<div class="steps-bullet">
1
</div>
<div class="steps-label">
Order Received <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage active">
<div class="steps-bullet">
2
</div>
<div class="steps-label">
Separate order <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage active current">
<div class="steps-bullet">
3
</div>
<div class="steps-label">
Order dispatched <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage">
<div class="steps-bullet">
4
</div>
<div class="steps-label">
Order delivered <br>
<small>em 01/05/2017</small>
</div>
</li>
</ul>
For the display warning step use .warning
beside .active
1
Order Received
em 01/05/2017
em 01/05/2017
2
Separate order
em 01/05/2017
em 01/05/2017
3
Order dispatched
em 01/05/2017
em 01/05/2017
4
Order delivered
em 01/05/2017
em 01/05/2017
<ul class="steps-container">
<li class="steps-stage active">
<div class="steps-bullet">
1
</div>
<div class="steps-label">
Order Received <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage active">
<div class="steps-bullet">
2
</div>
<div class="steps-label">
Separate order <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage active warning current">
<div class="steps-bullet">
3
</div>
<div class="steps-label">
Order dispatched <br>
<small>em 01/05/2017</small>
</div>
</li>
<li class="steps-stage">
<div class="steps-bullet">
4
</div>
<div class="steps-label">
Order delivered <br>
<small>em 01/05/2017</small>
</div>
</li>
</ul>