---
layout      : 'default'
css         : 'steps'
title       : 'Step'
description : 'Steps show the current activity in a series of consecutive activities.'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Element</a>
      <a class="item">Groups</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>

  <h2 class="ui dividing header">Standard</h2>
  <div class="example">
    <h4 class="ui header">Step</h4>
    <p>A step</p>
    <div class="ui steps">
      <div class="ui step">
        Shipping
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Groups</h2>
  <div class="example">
    <h4 class="ui header">Steps</h4>
    <p>A set of step</p>
    <div class="ui steps">
      <div class="ui step">
        Shipping
      </div>
      <div class="ui active step">
        Billing
      </div>
      <div class="ui disabled step">
        Confirm Order
      </div>
      <div class="ui disabled step">
        Complete
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>A step can be highlighted as active</p>
    <div class="ui steps">
      <div class="ui active step">
        Billing
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A step can show that it cannot be selected</p>
    <div class="ui steps">
      <div class="ui disabled step">
        Billing
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>Steps can have different sizes</p>

    <div class="ui small steps">
      <div class="ui active step">
        Shipping
      </div>
      <div class="ui disabled step">
        Billing
      </div>
      <div class="ui disabled step">
        Confirm Order
      </div>
      <div class="ui disabled step">
        Complete
      </div>
    </div>
    <br><br>
    <div class="ui large steps">
      <div class="ui active step">
        Shipping
      </div>
      <div class="ui disabled step">
        Billing
      </div>
      <div class="ui disabled step">
        Confirm Order
      </div>
      <div class="ui disabled step">
        Complete
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Step</h4>
    <p>Steps can be divided evenly inside their parent</p>
    <div class="ui four steps">
      <div class="ui active step">
        Shipping
      </div>
      <div class="ui disabled step">
        Billing
      </div>
      <div class="ui disabled step">
        Confirm Order
      </div>
      <div class="ui disabled step">
        Complete
      </div>
    </div>
  </div>


</div>