Step process bar used for multiple steps forms process
Default stepbar
Declare a .o-stepbar nav tag contaning the stepbar. Within a <ol>ordered list delcare .stepbar-item elements up to 5. Fill the .step-numberand .step-title accordingly.
Be careful to choose short labels when using 5 steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the titleattributle of the <a>link.
Fill a correct description on each .stepbar-linktitle attributes.
Use .done and .current classes in correct order. There is only one .current item.
Mobile stepbar
For mobile view, two classes depending on what you wish to display.
with numbers
Use .xs-numbers class to display step numbers and current step label. You can have up to 4 steps. Further steps will collapse onto new line.
with labels
Use .xs-labels class to display step labels without number. You can have up to 3 steps. Further steps will collapse onto new line.