Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Edge Headers

Unique for Material Design headers give your visitors a feeling of depth and meaning.

Combining them with any components of your choosing increase user experience and give additional meaning to your content.

Live demo

    <!-- Purple Header -->
    <div class="edge-header deep-purple"></div>

    <!-- Main Container -->
    <div class="container free-bird">
        <div class="row">
            <div class="col-md-8 col-lg-7 mx-auto float-xs-none white z-depth-1 py-2 px-2">
                <h2 class="h2-responsive"><strong>Material Design Edge Headers</strong></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut doloremque quasi repudiandae nulla eaque recusandae saepe cupiditate hic atque veritatis? Possimus dolore, repellendus veritatis omnis libero incidunt laudantium tenetur quasi!</p>
            </div>
        </div>
    </div>
    <!-- /.Main Container -->

Horizontal Steppers Premium component

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.


<div class="row">
    <div class="col-md-12">
        
        <ul class="stepper stepper-horizontal">
            <li class="completed">
                <a href="#!">
                    <span class="circle">1</span>
                    <span class="label">First step</span>
                </a>
            </li>
            <li class="active">
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>
            </li>
            <li class="warning">
                <a href="#!">
                    <span class="circle"><i class="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="circle">4</span>
                    <span class="label">Fourth step</span>
                </a>
            </li>
        </ul>

    </div>
</div>

Vertical Steppers Premium component

  • 1 First step
  • 2 Second step

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.

    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.

  • Third step
  • 4 Fourth step

<div class="row m-t-1">
    <div class="col-md-12">
        
        <ul class="stepper stepper-vertical">
            <li class="completed">
                <a href="#!">
                    <span class="circle">1</span>
                    <span class="label">First step</span>
                </a>
            </li>
            <li class="active">
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>
                <div class="step-content grey lighten-3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.</p>
                    <p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.</p>
                </div>
            </li>
            <li class="warning">
                <a href="#!">
                    <span class="circle"><i class="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="circle">4</span>
                    <span class="label">Fourth step</span>
                </a>
            </li>
        </ul>

    </div>
</div>

<div class="row m-t-1">
    <div class="col-md-12 text-xs-right">
        <button class="btn-flat waves-effect">Cancel</button>
        <button class="btn btn-primary">Next</button>
    </div>
</div>

Streak Premium component

Streaks are dividers that can be placed between sections. You can use them to put an inspirational quote, amazing photo or anything else you want.

Live demo

<div class="streak">
    <div class="flex-center">
        <ul>
            <li><h2 class="h2-responsive wow fadeIn"><i class="fa fa-quote-left" aria-hidden="true"></i> The people who are crazy enough to think they can change the world are the ones who do. <i class="fa fa-quote-right" aria-hidden="true"></i></h2></li>
            <li><h5 class="text-xs-center font-italic wow fadeIn" data-wow-delay="0.2s">~ Steve Jobs</h5></li>
        </ul>
    </div>
</div>

Large streak Premium component

If the default streak is not enough you can use larger version

Live demo

<div class="streak streak-lg">
    <div class="flex-center">
        <ul>
            <li><h2 class="h2-responsive wow fadeIn"><i class="fa fa-quote-left" aria-hidden="true"></i> The people who are crazy enough to think they can change the world are the ones who do. <i class="fa fa-quote-right" aria-hidden="true"></i></h2></li>
            <li><h5 class="text-xs-center font-italic wow fadeIn" data-wow-delay="0.2s">~ Steve Jobs</h5></li>
        </ul>
    </div>
</div>

Streak with Photo Premium component

You can make streaks even more beautiful, by simply adding them background photo. You should use a full-page photo.

Live demo

<div class="streak streak-lg streak-photo" style="background-image:url('http://mdbootstrap.com/img/Photos/Horizontal/Things/full%20page/img%20(6).jpg')">
    <div class="flex-center white-text pattern-1">
        <ul>
            <li><h2 class="h2-responsive wow fadeIn"><i class="fa fa-quote-left" aria-hidden="true"></i> The people who are crazy enough to think they can change the world are the ones who do. <i class="fa fa-quote-right" aria-hidden="true"></i></h2></li>
            <li><h5 class="text-xs-center font-italic wow fadeIn" data-wow-delay="0.2s">~ Steve Jobs</h5></li>
        </ul>
    </div>
</div>