Stepbar

Indicate the current step within a sequential navigation.

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-number and .step-title accordingly. Use .done and .current classes in correct order. There is only one .current item. Fill a correct description on each .stepbar-link title attributes. In mobile view a .stepbar-header is needed before the list, Orange brand labels it “Step”. Be carful 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 title attributle of the <a>link.

{% highlight html %} {% endhighlight %}

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. {% highlight html %} {% endhighlight %}

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. {% highlight html %} {% endhighlight %}