Step Wizard

When a user needs to complete a series of steps in order to achieve a specific goal, a step wizard should be used. Each step will offer different options to the user.

There are 2 variants of the step wizard, the horizontal wizard and the vertical wizard.

Step Wizard - Horizontal

Horizontal Step Wizard

Step 1 Title

Step 2 Title

Step 3 Title

<div class="euaa-step-wizard">
    <div class="euaa-step-wizard__content">
        <div class="euaa-step-wizard__section euaa-step-wizard__section--complete">
            <div class="euaa-step-wizard__line"></div>
            <div class="euaa-step-wizard__circle">1</div>
            <div class="euaa-step-wizard__line"></div>
        </div>
        <div class="euaa-step-wizard__section euaa-step-wizard__section--active">
            <div class="euaa-step-wizard__line"></div>
            <div class="euaa-step-wizard__circle">2</div>
            <div class="euaa-step-wizard__line"></div>
        </div>
        <div class="euaa-step-wizard__section">
            <div class="euaa-step-wizard__line"></div>
            <div class="euaa-step-wizard__circle">3</div>
            <div class="euaa-step-wizard__line"></div>
        </div>
    </div>
    <div class="euaa-step-wizard__content">
        <div class="euaa-step-wizard__section2 euaa-step-wizard__section--complete">
            <div class="euaa-step-wizard__title">Step 1 Title</div>
            <div class="euaa-step-wizard__triangle-container">
                <div class="euaa-step-wizard__triangle"></div>
            </div>
        </div>
        <div class="euaa-step-wizard__section2 euaa-step-wizard__section--active">
            <div class="euaa-step-wizard__title">Step 2 Title</div>
            <div class="euaa-step-wizard__triangle-container">
                <div class="euaa-step-wizard__triangle"></div>
            </div>
        </div>
        <div class="euaa-step-wizard__section2">
            <div class="euaa-step-wizard__title">Step 3 Title</div>
            <div class="euaa-step-wizard__triangle-container">
                <div class="euaa-step-wizard__triangle"></div>
            </div>
        </div>
    </div>
 </div>

Step Wizard - Vertical

Vertical Step Wizard

1Step 1 Title 2Step 2 Title 3Step 3 Title 4Step 4 title 5Step 5 Title 6Step 6 Title

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

<div class="euaa-step-wizard-vertical">
    <div class="euaa-step-wizard-vertical__side">
        <input type="radio" class="tab-1" name="tab" checked="checked">
        <span><span class="euaa-step-wizard-vertical__circle">1</span>Step 1 Title</span>
        <input type="radio" class="tab-2" name="tab">
        <span><span class="euaa-step-wizard-vertical__circle">2</span>Step 2 Title</span>
        <input type="radio" class="tab-3" name="tab">
        <span><span class="euaa-step-wizard-vertical__circle">3</span>Step 3 Title</span>
        <input type="radio" class="tab-4" name="tab">
        <span><span class="euaa-step-wizard-vertical__circle">4</span>Step 4 title</span>
        <input type="radio" class="tab-5" name="tab">
        <span><span class="euaa-step-wizard-vertical__circle">5</span>Step 5 Title</span>
        <input type="radio" class="tab-6" name="tab">
        <span><span class="euaa-step-wizard-vertical__circle">6</span>Step 6 Title</span>

        <div class="euaa-step-wizard-vertical__content">
            <section class="tab-item-1">
                <h1>Content 1</h1>
            </section>
            <section class="tab-item-2">
                <h1>Content 2</h1>
            </section>
            <section class="tab-item-3">
                <h1>Content 3</h1>
            </section>
            <section class="tab-item-4">
                <h1>Content 4</h1>
            </section>
            <section class="tab-item-5">
                <h1>Content 5</h1>
            </section>
            <section class="tab-item-6">
                <h1>Content 6</h1>
            </section>
        </div>
    </div>
</div>