Scroll to Top

Wizard

Wizards are very important part of a website when you don't want your user to get tired of filling forms or making another effort along your site while keeping self busy with it. You can temper with the colors, borders etc and add any element in the wizard and add static elements before or after pages. wizard is purely customize-able, use the wizard to introduce your imaginations to the world.

SITEMAP Documentation / Components / Wizard

Demo

Wizard Heading

Web development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Social media marketting

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Web Designs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Graphics

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Web development

Social media marketting

Web Designs

Graphics

Code copy

            <div class="wizard" Total-Pages="4" Page-active="1">
                <div class="row">
                    <div class="col m12 l12 s12 grey1">
                        <div class="pad-10">
                            <h2 class="padB-10 text-grey8">Wizard Heading</h2>
                            <div class="wizard-content" page="1">
                                <h3 class="padB-10 text-grey6">Web development</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="2">
                                <h3 class="padB-10 text-grey6">Social media marketting</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="3">
                                <h3 class="padB-10 text-grey6">Web Designs</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="4">
                                <h3 class="padB-10 text-grey6">Graphics</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <a class="wizard-prev pad-5 padX-15 grey8 hover-blue6 text-grey4 text-hover-white"><i class="fas fa-caret-left"></i></a>
                            <a class="wizard-next pad-5 padX-15 grey8 hover-blue6 text-grey4 text-hover-white"><i class="fas fa-caret-right"></i></a>
                        </div>
                    </div>
                    <div class="col m12 l12 s12">
                        <div class="wizard-content" page="1">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Web development</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="2.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="3.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="4.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="5.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="2">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Social media marketting</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="1.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="6.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="7.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="8.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="3">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Web Designs</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="10.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="11.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="12.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="13.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="4">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Graphics</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="14.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="15.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="16.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="17.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Feedback