Basic Card

Card Title

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.

This is a link This is a link 

 <div class="row">
        <div class="col-md-6">
            <div class="card blue-grey darken-1">
                <div class="card-content white-text">
                    <span class="card-title">Card Title</span>
                    <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
                </div>
                <div class="card-action">
                    <a href="#">This is a link</a>
                    <a href="#">This is a link</a>
                </div>
            </div>
        </div>
    </div>

Image Card
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.

Read more Buy now 

        <div class="col-md-6">
                <!--Image Card-->
                <div class="card hoverable">
                    <div class="card-image">
                        <div class="view overlay hm-white-slight z-depth-1">
                            <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
                            <a href="#">
                                <div class="mask waves-effect"></div>
                            </a>
                        </div>
                    </div>
                    <div class="card-content">
                        <h5>Card title</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.</p>
                    </div>
                    <!--Buttons-->
                    <div class="card-btn text-center">
                        <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                        <a href="#" class="btn btn-default btn-md waves-effect waves-light">Buy now</a>
                    </div>
                    <!--/.Buttons-->
                </div>
                <!--Image Card-->
            </div>

Card Reveal

Click on the card below
Click on image to see the effectmore_vert

This is a link

Card Titleclose

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.


        <div class="col-md-6">
                <!--Card Reveal-->
                <div class="card">
                    <div class="card-image">
                        <div class="view overlay hm-white-slight z-depth-1">
                            <img src="https://mdbootstrap.com/images/reg/reg%20(1).jpg">
                            <div class="mask waves-effect activator"></div>
                        </div>
                    </div>
                    <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">Click on image to see the effect<i class="material-icons right">more_vert</i></span>
                        <p><a>This is a link</a></p>
                    </div>
                    <div class="card-reveal">
                        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                        <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
                    </div>
                </div>
                <!--/.Card Reveal-->
            </div>

Social Card

Click me if you want to share!

This is a link


       <div class="col-md-6">
                <!--Card Reveal-->
                <div class="card hoverable">
                    <div class="card-image">
                        <div class="view overlay hm-white-slight z-depth-1">
                            <img src="https://mdbootstrap.com/images/reg/reg%20(7).jpg">
                            <div class="mask waves-effect activator"></div>
                        </div>
                    </div>
                    <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">Click me if you want to share!<i class="fa fa-share-alt reveal-button"> </i></span>
                        <p><a>This is a link</a></p>
                    </div>
                    <div class="card-reveal social-reveal">
                        <span class="card-title grey-text text-darken-4">Share with your friends<i class="material-icons right">close</i></span>
                        <hr>
                        <div class="text-center">
                            <a class="btn-floating btn-large fb-bg waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
                            <a class="btn-floating btn-large tw-bg waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
                            <a class="btn-floating btn-large gplus-bg waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
                            <a class="btn-floating btn-large li-bg waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
                            <a class="btn-floating btn-large ins-bg waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
                            <a class="btn-floating btn-large pin-bg waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
                        </div>
                    </div>
                </div>
                <!--/.Card Reveal-->
            </div>

Card Panel

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. 

<div class="row">
        <div class="col-md-6">
            <div class="card-panel teal">
                <span class="white-text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.
          </span>
            </div>
        </div>
    </div>

White Card Panel

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. 

 <div class="row">
    <div class="col-md-6">
        <div class="card-panel">
            <span class="blue-text text-darken-2">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</span>
        </div>
    </div>

Rotating card

Heading

Subheading
Click here to rotate

Heading

Subheading
Lorem ipsum

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Click here to rotate back

Heading

Subheading
Click here to rotate

Heading

Subheading
Lorem ipsum

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Click here to rotate back

Note: If you want to use more than one card you have to assign each of them an unique ID. Once you do that, assign the "data-card" value (in the triggering button) to the corresponding ID.


Example:
If #id="card=1" then data-card="card-1"



           <div class="col-lg-5 col-md-6">

                <!--Rotating card-->
                <div class="card-wrapper">
                    <div id="card-1" class="card-rotating effect__click">

                        <!--Front Side-->
                        <div class="face card-rotating__front z-depth-1">
                            <div class="card-up">
                                <img src="https://mdbootstrap.com/images/reg/reg%20(5).jpg" class="img-responsive">
                            </div>
                            <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" class="img-circle img-responsive">
                            </div>
                            <h4>Heading</h4>
                            <h5>Subheading</h5>

                            <!--Triggering button-->
                            <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"> Click here to rotate</i></a>
                        </div>
                        <!--/.Front Side-->

                        <!--Back Side-->
                        <div class="face card-rotating__back z-depth-1">
                            <h4>Heading</h4>
                            <p class="card-content text-center">Subheading
                                <br> Lorem ipsum</p>
                            <hr> Lorem ipsum
                            <br> Lorem ipsum
                            <br> Lorem ipsum
                            <br> Lorem ipsum
                            <br> Lorem ipsum
                            <br> Lorem ipsum
                            <br>

                            <!--Triggering button-->
                            <a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"> Click here to rotate back</i></a>
                            <div class="sm-container">
                                <ul class="list-inline card-sm">
                                    <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!--/.Back Side-->

                    </div>
                </div>
                <!--/.Rotating card-->
                
            </div>

Elegant card

Category 1
Lorem ipsium

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.


       <!--Card-->
            <div class="col-md-6">
                <div class="elegant-card z-depth-1 hoverable">
                    <!-- Image wrapper -->
                    <div class="card-up view overlay hm-white-slight">
                        <h5 class="card-label"> <span class="label rgba-black-light">Category 1</span></h5>
                        <a><img src="https://mdbootstrap.com/images/regular/nature/img%20(48).jpg" class="img-responsive"></a>
                        <div class="mask waves-effect waves-light"> </div>
                    </div>

                    <!-- Button -->
                    <a class="btn-floating btn-large waves-effect waves-light stylish-color"><i class="fa fa-chevron-right"></i></a>
                    <!-- Content -->
                    <div class="card-content">
                        <h5>Lorem ipsium</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.</p>
                    </div>
                    <!-- Footer -->
                    <div class="card-footer">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i>05/10/2015</li>
                            <li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
                            <li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
                            <li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--/.Card-->

Testimonials Cards

John Sulivan

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.

Sara Romano

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.

Anna Maria

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.


       <div class="col-md-4">
                <div class="testimonial-card z-depth-1">
                    <div class="card-up default-color-dark">
                    </div>
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                    </div>
                    <div class="card-content">
                        <h5>Anna Maria</h5>
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                            </div>
                    </div>
                </div>

Review card

star star star star star_border chevron_right
Lorem ipsum dolor sit amet. 


       <div class="col-md-9">

                <!--Review card-->
                <div class="review-card hoverable view overlay hm-blue-slight">

                    <!--Image-->
                    <a>
                        <img src="https://mdbootstrap.com/images/slides/slide%20(13).jpg" class="img-responsive">
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                    <!--/.Image-->

                    <!--Footer-->
                    <div class="card-footer">
                        <a class="btn blue-grey darken-2 rating waves-effect waves-light">
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star_border</i>
                        </a>
                        <!-- Button -->
                        <a class="btn-floating btn-large blue-grey darken-2 waves-effect waves-light"><i class="material-icons">chevron_right</i></a>

                        <h5 class="h5-responsive">Lorem ipsum dolor sit amet. </h5>

                        <ul class="list-inline item-details">
                            <li><i class="fa fa-clock-o"> 05/10/2015</i>
                                <li><a><i class="fa fa-comments-o"></i> 12</a></li>
                                <li><a><i class="fa fa-facebook"> </i> 21</a></li>
                                <li><a><i class="fa fa-twitter"> </i> 5</a></li>
                        </ul>
                    </div>
                    <!--/.Footer-->

                </div>
                <!--/.Review card-->

            </div>

Stylish card

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Read more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Read more 


           <div class="col-md-5">
        <!--Stylish Card Light-->
        <div class="card stylish-card hoverable">
           
            <div class="view overlay hm-white-slight z-depth-1">
                <img src="https://mdbootstrap.com/images/regular/nature/img%20(54).jpg" class="img-responsive" alt="">
                <div class="mask waves-effect activator"></div>
            </div>

            <!--Content-->
            <div class="card-content">
                <a href=""><span class="card-title grey-text text-darken-4"><i class="fa fa-share-alt reveal-button"> </i></span></a>
                <h4>Card title</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                <div class="card-footer text-right">
                    <a class="black-text waves-effect activator"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>

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


    <div class="col-md-5">
        <!--Stylish Card Dark-->
        <div class="card stylish-card hoverable">
           
            <div class="view overlay hm-blue-slight z-depth-5">
                <img src="https://mdbootstrap.com/images/regular/nature/img%20(15).jpg" class="img-responsive" alt="">
                <div class="mask waves-effect"></div>
            </div>

            <!--Content-->
            <div class="card-content elegant-color white-text">
                <a href=""><span class="card-title white-text"><i class="fa fa-share-alt reveal-button"> </i></span></a>
                <h4>Card title</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                <div class="card-footer text-right">
                    <a class="white-text waves-effect"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>

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

Changing colors

You can easily change the color of each element in all cards by editing a color class.

All color references you can find on page MDB Colors.

Here you can find all references of RGBA colors.


Example:
star star star star star_border chevron_right
Lorem ipsum dolor sit amet. 


       <!--Review card-->
       <div class="col-md-9">
                <div class="review-card hoverable view overlay hm-red-light">
                   <!--Card image-->
                    <img src="http://brandflow.pl/wp-content/uploads/2015/09/slide2.jpg" class="img-responsive hoverable">
                    <div class="mask"></div>
                    <!--Card footer-->
                    <div class="card-footer rgba-stylish-strong">
                        <a class="btn blue rating">
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star_border</i>
                        </a>
                        <!-- Button -->
                        <a class="btn-floating btn-large waves-effect waves-light  blue"><i class="material-icons">chevron_right</i></a>
                        <!-- Title -->
                        <h5 class="h5-responsive">Lorem ipsum dolor sit amet. </h5>
                        <!--Card details-->
                        <ul class="list-inline item-details">
                            <li><i class="fa fa-clock-o"> 05/10/2015</i>
                                <li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
                                <li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
                                <li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--/.Review card-->