Preview

1

Step one

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto peto petrullio.
2

Step two

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto peto petrullio.
3

Step three

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto peto petrullio.
1

Step one

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
2

Step two

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
3

Step three

Arteso ipsum dolor sit amet conse ctetur adipi scing elitsed do more incididunto. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.

Usage

<div class="box-steps">
    <div class="step-item">
        <span>1</span>
        <div class="content">
            <h3>Step one</h3>
            <div>

            </div>
        </div>
    </div>
    <div class="step-item">
        <span>2</span>
        <div class="content">
            <h3>Step two</h3>
            <div>

            </div>
        </div>
    </div>
    <div class="step-item">
        <span>3</span>
        <div class="content">
            <h3>Step three</h3>
            <div>

            </div>
        </div>
    </div>
</div>

Settings

Name Type Description
Vertical layout CSS Add the class box-steps-vertical to the component to make it vertical.
Columns Attribute Add the attribute data-columns="123" to the component to set the columns number. Allowed values: 2, 4, 5. Default value is 3. This feature is available only with the horizontal layout.
Try it 2 columns 4 columns