Steps
A step shows the completion status of an activity in a series of activities.
The Semantic UI
definitions/elements/step.less component is not enabled by default. It can be enabled in the WordPress admin dashboard under Chap Theme -> Chap Compiler.Steps shortcode arguments
| Classes |
|
Step shortcode arguments
| Classes |
| ||
title | Step title. | ||
icon | Name of the icon to use. |
A single step
Shipping
<steps>
<step>Shipping</step>
</steps>Steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
<steps>
<step title="Shipping" icon="truck">Choose your shipping options</step>
<step active title="Billing" icon="payment">Enter billing information</step>
<step disabled title="Confirm order" icon="info">
</steps>Ordered steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
Verify order details
<steps ordered>
<step completed title="Shipping">Choose your shipping options</step>
<step completed title="Billing">Enter billing information</step>
<step active title="Confirm order">Verify order details</step>
</steps>Vertical steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
Verify order details
<steps vertical>
<step completed title="Shipping" icon="truck">Choose your shipping options</step>
<step completed title="Billing" icon="payment">Enter billing information</step>
<step active title="Confirm order" icon="info">Verify order details</step>
</steps>Link steps
Shipping
Choose your shipping options
Billing
Enter billing information
<steps>
<step active title="Shipping" icon="truck" url="#link-steps">Choose your shipping options</step>
<step title="Billing" url="#link-steps">Enter billing information</step>
</steps>
<steps>
<step link active title="Shipping" icon="truck">Choose your shipping options</step>
<step link title="Billing">Enter billing information</step>
</steps>Notes
Steps can contain a link or mimic one with the link class.Attached
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.
Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea.
<steps top attached>
<step title="Shipping" icon="truck">Choose your shipping options</step>
<step active title="Billing" icon="payment">Enter billing information</step>
<step disabled title="Confirm order" icon="info">
</steps>
<segment bottom attached>
<lorem 3 short>
</segment>Evenly divided
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
<steps three>
<step title="Shipping" icon="truck">Choose your shipping options</step>
<step active title="Billing" icon="payment">Enter billing information</step>
<step disabled title="Confirm order" icon="info">
</steps>Fluid steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm order
<steps vertical fluid>
<step title="Shipping" icon="truck">Choose your shipping options</step>
<step active title="Billing" icon="payment">Enter billing information</step>
<step disabled title="Confirm order" icon="info">
</steps>Size
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
<steps mini>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps tiny>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps small>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps large>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps big>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps huge>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>
<steps massive>
<step active title="Shipping" icon="truck">Choose your shipping options</step>
<step title="Billing">Enter billing information</step>
</steps>