Steps

Updated 4 months ago by Wizzi

Steps

A set of steps

<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>
</div>
</div>

Ordered

A step can show a ordered sequence of steps

<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="completed step">
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</div>
<div class="active step">
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</div>
</div>

Vertical

A step can be displayed stacked vertically

<div class="ui 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 class="completed step">
<i class="credit card icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</div>
<div class="active 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>

A step can link

<div class="ui steps">
<a class="active step" href="#">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</a>
<a class="step" href="#">
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</a>
</div>

Completed

A step can show that a user has completed it

<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>

Stackable

A step can stack vertically only on smaller screens

<div class="ui tablet stackable steps">
<div class="step">
<i class="plane 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="dollar 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 circle icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</div>
</div>

Size

Steps can have different sizes

// Mini
<div class="ui mini 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>

// Large
<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>

// Massive
<div class="ui massive 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>


How did we do?