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
2
Separate order
em 01/05/2017
3
Order dispatched
em 01/05/2017
4
Order delivered
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
2
Separate order
em 01/05/2017
3
Order dispatched
em 01/05/2017
4
Order delivered
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>