---
layout      : 'default'
css         : 'steps'

element     : 'step'
elementType : 'element'

title       : 'Step'
description : 'A step shows the completion status of an activity in a series of activities'
type        : 'UI Element'

themes      : ['default', 'Basic', 'GitHub']
---

<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/step.less" />

<div class="main container">

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

  <div class="example">
    <h4 class="ui header">Steps</h4>
    <p>A set of step</p>
    <div class="ui steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Ordered</h4>
    <p>A step can show a numerically ordered sequence of steps</p>
    <div class="ui ordered steps">
      <div class="completed step">
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="active step">
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="disabled step">
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Vertical</h4>
    <p>Vertical steps display each step stacked vertically</p>
    <div class="ui vertical steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </div>


  <h2 class="ui dividing header">Content</h2>
  <div class="example">
    <h4 class="ui header">Step</h4>
    <p>A step</p>
    <div class="ui steps">
      <div class="step">
        Shipping
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Descriptive Step</h4>
    <p>A step can optionally contain a title and description</p>
    <div class="ui steps">
      <div class="step">
        <div class="title">Shipping</div>
        <div class="description">Choose your shipping options</div>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Steps with Icons</h4>
    <p>A step can optionally contain an icon</p>
    <div class="ui steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Linkable Steps</h4>
    <p>A step can be clickable</p>
    <div class="ui steps">
      <a class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui steps">
      <div class="link step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </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="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Completed</h4>
    <p>A step can show that a user has completed it</p>
    <div class="ui steps">
      <div class="completed step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui ordered steps">
      <div class="completed step">
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </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="disabled step">
        Billing
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Fluid Card</h4>
    <p>A fluid card takes up the width of its container</p>
    <div class="ui two column grid">
      <div class="column">
        <div class="ui fluid vertical steps">
          <div class="completed step">
            <i class="truck icon"></i>
            <div class="content">
              <div class="title">Shipping</div>
              <div class="description">Choose your shipping options</div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="ui fluid vertical steps">
          <div class="completed step">
            <i class="payment icon"></i>
            <div class="content">
              <div class="title">Billing</div>
              <div class="description">Enter billing information</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div></h2>

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

    <div class="ui small steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
        </div>
      </div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
        </div>
      </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 three steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
        </div>
      </div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
        </div>
      </div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui two steps">
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
        </div>
      </div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
        </div>
      </div>
    </div>
  </div>


</div>