Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Cards

1. Cards

To describe the best features of our products/services we will use cards.

Cards are great to present content to the users. They offer a clear, simple and neat UI pattern.

We have already prepared a Grid construction for the cards, with 3 columns inside. Now it's time to put a Cards inside these columns.


Go to the CARDS section in MDB documentation and grab the code of the Card with waves effect. Then paste it into the each column (.col-md-4) of the .row inside the "best-features" section.

We'll make a few small modification of the card:

- Remove the buttons, because we don't need them

- Add a class .text-center to each div .card-block to center the content

- Add a divider <hr> below each .card-title heading.


After all your section Best Features should look like that:


<!--Section: Best features-->
<section id="best-features">
    <div class="row">
        <!--First columnn-->
        <div class="col-md-4">
            <!--Card-->
            <div class="card wow fadeInUp">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(2).jpg" class="img-fluid" alt="">
                    <a href="#">
                        <div class="mask waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--First columnn-->

        <!--Second columnn-->
        <div class="col-md-4">
            <!--Card-->
            <div class="card wow fadeInUp" data-wow-delay="0.2s">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(4).jpg" class="img-fluid" alt="">
                    <a href="#">
                        <div class="mask waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--Second columnn-->

        <!--Third columnn-->
        <div class="col-md-4">
            <!--Card-->
            <div class="card wow fadeInUp" data-wow-delay="0.4s">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(8).jpg" class="img-fluid" alt="">
                    <a href="#">
                        <div class="mask waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--Third columnn-->
    </div>
</section>
<!--/Section: Best features-->

Now you can change the images of your cards (make sure they are an equal size), titles and text. Fill it up according to your needs.


2. Additional Features

MDB not only provides you hundreds of useful components but also lets you mix them and customize according to your needs.

Now we'll mix two different components - Cards and List Group

Inside two columns of #additional-features section put the same two Cards, as we used above.


<!--Section: Additional features-->
<section id="additional-features">
    <div class="row">
        <!--First columnn-->
        <div class="col-md-6">

            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-fluid" alt="">
                    <a href="#">
                        <div class="mask waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Button</a>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->

        </div>
        <!--First columnn-->

        <!--Second column-->
        <div class="col-md-6">

            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-fluid" alt="">
                    <a href="#">
                        <div class="mask waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Button</a>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->

        </div>
        <!--/Second column-->
    </div>
</section>
<!--/Section: Additional features-->

Now from each Card remove .card-block divs and its entire content.


<!--Card-->
<div class="card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-fluid" alt="">
        <a href="#">
            <div class="mask waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->

    <!--Card content-->

    <!--/.Card content-->

</div>
<!--/.Card-->

From the LIST GROUP section of MDB documentation grab the code of Basic List and put it into each card, between <!--Card content--> comments:


<!--Card-->
<div class="card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-fluid" alt="">
        <a href="#">
            <div class="mask waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->

    <!--Card content-->
    <ul class="list-group">
        <li class="list-group-item">
            Cras justo odio
        </li>
        <li class="list-group-item">
            Dapibus ac facilisis in
        </li>
        <li class="list-group-item">
            Morbi leo risus
        </li>
        <li class="list-group-item">
            Cras justo odio
        </li>
        <li class="list-group-item">
            Dapibus ac facilisis in
        </li>
    </ul>
    <!--/.Card content-->

</div>
<!--/.Card-->

Inside each .list-group-item place an icon, like on the example below.


<!--Card content-->
<ul class="list-group">
    <li class="list-group-item">
        Cras justo odio <i class="fa fa-check ml-auto"></i>
    </li>
    <li class="list-group-item">
        Dapibus ac facilisis in <i class="fa fa-check ml-auto"></i>
    </li>
    <li class="list-group-item">
        Morbi leo risus <i class="fa fa-check ml-auto"></i>
    </li>
    <li class="list-group-item">
        Cras justo odio <i class="fa fa-check ml-auto"></i>
    </li>
    <li class="list-group-item">
        Dapibus ac facilisis in <i class="fa fa-check ml-auto"></i>
    </li>
</ul>
<!--/.Card content-->

Class .fa fa-check is the symbol of the icon. If you want to see all available icons go to the ICONS section of MDB documentation.

Class .pull-xs-right gives a float: right property to the icon, which makes it aligned to the right.


We'll make these icons green. Add the following code to style.css


.fa-check {
    color: green;
}

If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 6

  • User avatar

    Alexandr Revenoc

    I don't understand why social buttons don't display properly: they don't have colorful background, only icons are displayed. How I can fix this? I've tried other styles of social byttons but no one displays correct.

  • User avatar

    Michal Szymanski

    If there are any differences between our presentation and your result, most probably this is because you try to use Premium components (these work only with MDB PRo) with Free version.

  • Jek Hatulan

    good day! I really like all what you all did here, awesome design! I wanna ask how can I make the image of the card to have a fix size without re-size my image? whether what size my image was.

  • User avatar

    Michal Szymanski

    Hi Jek. I'm glad you like it, thanks. About your question: add to your image class="img-fluid"

  • User avatar

    ekubiak

    there is no explanation about the animation in this section :(

  • User avatar

    Michal Szymanski

    ekubiak, If you have read the previous lessons about animations you can do it easily on your own :)

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.