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-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.

1 First step
2 Second step
Third step


<!-- Horizontal Steppers -->
<div class="row">
    <div class="col-md-12">

        <!-- Stepers Wrapper -->
        <ul class="stepper stepper-horizontal">

            <!-- First Step -->
            <li class="completed">
                <a href="#!">
                    <span class="circle">1</span>
                    <span class="label">First step</span>
                </a>
            </li>

            <!-- Second Step -->
            <li class="active">
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>
            </li>

            <!-- Third Step -->
            <li class="warning">
                <a href="#!">
                    <span class="circle"><i class="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>

        </ul>
        <!-- /.Stepers Wrapper -->

    </div>
</div>
<!-- /.Horizontal Steppers -->

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


<!-- Vertical Steppers -->
<div class="row m-t-1">
    <div class="col-md-12">

        <!-- Stepers Wrapper -->
        <ul class="stepper stepper-vertical">

           <!-- First Step -->
            <li class="completed">
                <a href="#!">
                    <span class="circle">1</span>
                    <span class="label">First step</span>
                </a>
            </li>

            <!-- Second Step -->
            <li class="active">

                <!--Section Title -->
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>

                <!-- Section Description -->
                <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>

            <!-- Third Step -->
            <li class="warning">
                <a href="#!">
                    <span class="circle"><i class="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>

            <!-- Fourth Step -->
            <li>
                <a href="#!">
                    <span class="circle">4</span>
                    <span class="label">Fourth step</span>
                </a>
            </li>

        </ul>
        <!-- /.Stepers Wrapper -->

    </div>
</div>

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

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-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-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('https://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-center font-italic wow fadeIn" data-wow-delay="0.2s">~ Steve Jobs</h5></li>
        </ul>
    </div>
</div>