Introduction

MDB provides you multiple sections which help you highlight the best features of your project.

Features v.1 Premium component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?

Analytics

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Tutorials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relax

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


<!--Section: Features v.1-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading">Why is it so great? v.1</h1>
    <!--Section sescription-->
    <p class="section-description lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--First row-->
    <div class="row features-big">
        <!--First column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-area-chart blue-text"></i>
            <h4 class="feature-title">Analytics</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-book green-text"></i>
            <h4 class="feature-title">Tutorials</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-coffee red-text"></i>
            <h4 class="feature-title">Relax</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.1-->

Features v.2 Premium component

Why is it so great?

Marketing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Learn more

Customization

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Learn more

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Learn more


<!--Section: Features v.2-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading">Why is it so great? v.2</h1>
    <!--Section sescription-->
    <p class="section-description lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--First row-->
    <div class="row features-small">

        <!--First column-->
        <div class="col-md-4">
            <div class="col-xs-2">
                <i class="fa fa-bullhorn blue-text"></i>
            </div>
            <div class="col-xs-10">
                <h4 class="feature-title">Marketing</h4>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                <a class="btn btn-primary">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4">
            <div class="col-xs-2">
                <i class="fa fa-cogs green-text"></i>
            </div>
            <div class="col-xs-10">
                <h4 class="feature-title">Customization</h4>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                <a class="btn btn-default">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4">
            <div class="col-xs-2">
                <i class="fa fa-dashboard red-text"></i>
            </div>
            <div class="col-xs-10">
                <h4 class="feature-title">Support</h4>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                <a class="btn btn-danger">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.2-->

Features v.3 Premium component

Why is it so great?

Safety

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Finance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


<!--Section: Features v.3-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading">Why is it so great? v.3</h1>
    <!--Section sescription-->
    <p class="section-description lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--First row-->
    <div class="row features-small">

        <!--First column-->
        <div class="col-md-5 mb-r center-on-small-only">
            <img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-7 center-on-small">
            <!--First row-->
            <div class="row">
                <div class="col-xs-1">
                    <i class="fa fa-bank indigo-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Safety</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/First row-->

            <div style="height:50px"></div>

            <!--Second row-->
            <div class="row">
                <div class="col-xs-1">
                    <i class="fa fa-code indigo-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Technology</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Second row-->

            <div style="height:50px"></div>

            <!--Third row-->
            <div class="row">
                <div class="col-xs-1">
                    <i class="fa fa-money indigo-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Finance</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/Second column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.3-->

Features v.4 Premium component

Why is it so great?

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


<!--Section: Features v.4-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading">Why is it so great? v.4</h1>
    <!--Section sescription-->
    <p class="section-description lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--First row-->
    <div class="row features-small">

        <!--First column-->
        <div class="col-md-4">
            <!--First row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-flag-checkered indigo-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">International</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/First row-->

            <!--Second row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-flask blue-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Experimental</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Second row-->

            <!--Third row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-glass cyan-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Relaxing</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4 mb-r center-on-small-only">
            <img src="https://mdbootstrap.com/images/mockups/header-iphone.png" alt="" class="z-depth-0">
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4">
            <!--First row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-heart red-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Beloved</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/First row-->

            <!--Second row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-flash orange-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Rapid</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Second row-->

            <!--Third row-->
            <div class="row">
                <div class="col-xs-2">
                    <i class="fa fa-magic lime-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Magical</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.4-->