Angular Bootstrap cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and great display options.

It is hard to think of a better way of displaying your content to users other than by cards. Some of the biggest players like Facebook or Google are well aware of that, as you might have noticed in almost all their products.

Cards provide you with clarity, clean content categorisation and attractive form of presenting it to the users.

MDB enhances Bootstrap cards with characteristic Material Design features, such as slight shadows, depth, cascading or waves effects. Apart from that, it enriches it with additional optional animations, social icons, avatars and various other effects not available in a native Bootstrap.


Basic example

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

<div class="card">

    <!--Card image-->
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap">

    <!--Card content-->
    <div class="card-body">
        <!--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 waves-light" mdbWavesEffect>Button</a>
    </div>

</div>
            

Waves effect

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

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

    <!--Card image-->
    <div class="view hm-white-slight waves-light" mdbWavesEffect>
        <img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" class="img-fluid" alt="Card image with a tree in a middle of a lake.">
        <a>
            <div class="mask"></div>
        </a>
    </div>

    <!--Card content-->
    <div class="card-body">
        <!--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 class="btn btn-primary waves-light" mdbWavesEffect>Button</a>
    </div>

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

Cascading cards MDB Pro component

Wider

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Narrower

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Regular

Billy Coleman

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.


<div class="col-md-4">
    <!--Card-->
    <div class="card card-cascade wider">

        <!--Card image-->
        <div class="view view-cascade overlay waves-light" mdbWavesEffect>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid">
            <a>
                <div class="mask rgba-white-slight"></div>
            </a>
        </div>
        <!--/Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade text-center">
            <!--Title-->
            <h4 class="card-title"><strong>Alice Mayer</strong></h4>
            <h5 class="indigo-text"><strong>Photographer</strong></h5>

            <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam.
            </p>


            <!--Linkedin-->
            <a class="px-2 icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
            <!--Twitter-->
            <a class="px-2 icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
            <!--Dribbble-->
            <a class="px-2 icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>

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

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

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

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

        <!--Card image-->
        <div class="view overlay view-cascade waves-light" mdbWavesEffect>
            <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt="">
            <a>
                <div class="mask rgba-white-slight"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade">
            <h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Cheat day inspirations</h4>
            <!--Text-->
            <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                aliquid ex ea commodi.</p>
            <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>
        </div>
        <!--/.Card content-->

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

</div>

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

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

        <!--Card image-->
        <div class="view overlay view-cascade waves-light" mdbWavesEffect>
            <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="img-fluid" alt="">
            <a>
                <div class="mask rgba-white-slight"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade text-center">
            <!--Title-->
            <h4 class="card-title"><strong>Billy Cullen</strong></h4>
            <h5>Web developer</h5>

            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
                sunt, quod quibusdam.
            </p>

            <!--Facebook-->
            <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter"></i></a>
            <!--Google +-->
            <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect><i class="fa fa-dribbble"></i></a>

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

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

</div>
            

Cascading panels

Mattonit

The Boar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Title of the news

26.07.2017

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum.

Read more

Marta

Deserve for her own card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.



<!--Grid column-->
<div class="col-lg-4 col-md-12">

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

        <!--Card image-->
        <div class="view view-cascade  gradient-card-header purple-gradient">
            <h2 class="card-header-title">Mattonit</h2>
            <p>The Boar</p>
            <div class="text-center">
                <!--Facebook-->
                <a type="button" class="btn-floating btn-small waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small waves-light" mdbWavesEffect><i class="fa fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small waves-light" mdbWavesEffect><i class="fa fa-google-plus"></i></a>
            </div>
        </div>
        <!--/Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade text-center">

            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
                sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium
                veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
                laboriosam, nisi ut aliquid ex ea commodi.</p>

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

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

</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-4 col-md-6">

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

        <!--Card image-->
        <div class="view view-cascade gradient-card-header peach-gradient">
            <h2 class="card-header-title mb-2">Title of the news</h2>
            <p class=""><i class="fa fa-calendar"></i> 26.07.2017</p>

        </div>
        <!--/Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade text-center">

            <p class="card-text mr-2 ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
                sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium
                veritatis sequi.Ut enim ad minima veniam, quis nostrum.</p>

            <a href="#" class="orange-text mt-1 d-flex flex-row-reverse">
                <h5 class="waves-effect p-2" mdbWavesEffect>Read more <i class="fa fa-chevron-right"></i></h5>
            </a>
        </div>
        <!--/.Card content-->

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

</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-4 col-md-6">

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

        <!--Card image-->
        <div class="view view-cascade gradient-card-header blue-gradient">
            <h2 class="card-header-title">Marta</h2>
            <p>Deserve for her own card</p>
        </div>
        <!--/Card image-->

        <!--Card content-->
        <div class="card-body card-body-cascade text-center">

            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
                sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium
                veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
                laboriosam.
            </p>
            <hr>
            <!--Twitter-->
            <a class="icons-sm tw-ic"><i class="fa fa-twitter px-2"> </i></a>
            <!--Linkedin-->
            <a class="icons-sm li-ic"><i class="fa fa-linkedin px-2"> </i></a>
            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook px-2"> </i></a>
            <!--Email-->
            <a class="icons-sm email-ic"><i class="fa fa-envelope px-2"> </i></a>
        </div>
        <!--/.Card content-->

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

</div>
<!--Grid column-->
            

Reversed cascade

My adventure

Photography

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.


<!--Card-->
<div class="card card-cascade wider reverse my-4">

    <!--Card image-->
    <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">
        <a>
            <div class="mask rgba-white-slight"></div>
        </a>
    </div>
    <!--/Card image-->

    <!--Card content-->
    <div class="card-body card-body-cascade text-center">
        <!--Title-->
        <h4 class="card-title"><strong>My adventure</strong></h4>
        <h5 class="indigo-text"><strong>Photography</strong></h5>

        <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
        </p>

        <!--Linkedin-->
        <a class="icons-sm li-ic"><i class="fa fa-linkedin px-2"> </i></a>
        <!--Twitter-->
        <a class="icons-sm tw-ic"><i class="fa fa-twitter px-2"> </i></a>
        <!--Dribbble-->
        <a class="icons-sm fb-ic"><i class="fa fa-facebook px-2"> </i></a>

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

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

Action button & footer MDB Pro component

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

    
<!--Card-->
<div class="card">
    <!--Card image-->
    <div class="view overlay waves-light" mdbWavesEffect>
        <img src="https://mdbootstrap.com/img/Photos/Others/food.jpg" class="img-fluid" alt="sample">
        <a>
            <div class="mask rgba-white-slight"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Button-->
    <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
        <i class="fa fa-chevron-right pl-1 waves-light" mdbWavesEffect></i>
    </a>
    <!--Card content-->
    <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <p class="font-small grey-dark-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <!--/.Card content-->
    <!-- Card footer -->
    <div class="mdb-color lighten-3 text-center">
        <ul class="list-unstyled list-inline font-small mt-3">
            <li class="list-inline-item pr-2 white-text">
                <i class="fa fa-clock-o pr-1"></i>05/10/2015</li>
            <li class="list-inline-item pr-2">
                <a href="#" class="white-text">
                    <i class="fa fa-comments-o pr-1"></i>12</a>
            </li>
            <li class="list-inline-item pr-2">
                <a href="#" class="white-text">
                    <i class="fa fa-facebook pr-1"> </i>21</a>
            </li>
            <li class="list-inline-item">
                <a href="#" class="white-text">
                    <i class="fa fa-twitter pr-1"> </i>5</a>
            </li>
        </ul>
    </div>
    <!-- Card footer -->
</div>
<!--/.Card-->
    

Stylish cards MDB Pro component

Light version

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Read more

<div class="card">
    <!--Card image-->
    <div class="view overlay waves-light" mdbWavesEffect>
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg" class="img-fluid" alt="fern">
        <a>
            <div class="mask rgba-white-slight"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Card content-->
    <div class="card-body">
        <!--Social shares button-->
        <a class="activator px-3 mr-2">
            <i class="fa fa-share-alt"></i>
        </a>
        <!--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>
        <a class="link-text">
            <h5 class="waves-light" mdbWavesEffect>Read more
                <i class="fa fa-chevron-right waves-light" mdbWavesEffect></i>
            </h5>
        </a>
    </div>
    <!--/.Card content-->
</div>
<!--/.Card Light-->
            

Dark version

Add a class .card-dark to use a dark variation.

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Read more

<!--Card Dark-->
        <div class="card card-dark">
            <!--Card image-->
            <div class="view overlay waves-light" mdbWavesEffect>
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg" class="img-fluid" alt="work desk">
                <a>
                    <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <!--/.Card image-->
            <!--Card content-->
            <div class="card-body elegant-color white-text">
                <!--Social shares button-->
                <a class="activator px-3 mr-2">
                    <i class="fa fa-share-alt white-text"></i>
                </a>
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr class="hr-light">
                <!--Text-->
                <p class="font-small mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#!" class="white-text d-flex justify-content-end">
                    <h5 class="waves-light" mdbWavesEffect>Read more</h5>
                    <span>
                        <i class="fa fa-chevron-right pl-2 waves-light" mdbWavesEffect></i>
                    </span>
                </a>
            </div>
            <!--/.Card content-->
        </div>
        <!--/.Card Dark-->
            

Testimonial card MDB Pro component

To change a background color use one of over 300 color classes from our palette .

woman avatar

Anna Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

woman avatar

Martha Smith


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

    
<!--Grid row-->
<div class="row">

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

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

            <!--Bacground color-->
            <div class="card-up indigo lighten-1">
            </div>

            <!--Avatar-->
            <div class="avatar mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="rounded-circle">
            </div>

            <div class="card-body">
                <!--Name-->
                <h4 class="card-title">Anna Doe</h4>
                <hr>
                <!--Quotation-->
                <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
            </div>

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

    </div>
    <!--Grid column-->

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

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

            <!--Bacground color-->
            <div class="card-up aqua-gradient">
            </div>

            <!--Avatar-->
            <div class="avatar mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive">
            </div>

            <div class="card-body">
                <!--Name-->
                <h4 class="card-title">Martha Smith</h4>
                <hr>
                <!--Quotation-->
                <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
            </div>

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

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->

    

Image overlays MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

<!-- Card -->
<div class="card card-image mb-3" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

    <!-- Content -->
    <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
        <div>
            <h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
            <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                Odit sed qui, dolorum!.</p>
            <a class="btn btn-pink waves-light" mdbWavesEffect><i class="fa fa-clone left"></i> View project</a>
        </div>
    </div>
    <!-- Content -->
</div>
<!-- Card -->

<!-- Card -->
<div class="card card-image mb-3" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg');">

    <!-- Content -->
    <div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
        <div>
            <h5 class="orange-text"><i class="fa fa-desktop"></i> Software</h5>
            <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                Odit sed qui, dolorum!.</p>
            <a class="btn btn-deep-orange waves-light" mdbWavesEffect><i class="fa fa-clone left"></i> View project</a>
        </div>
    </div>
    <!-- Content -->
</div>
<!-- Card -->
            

Inverted text

Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. Add .card-inverse for white text and specify the background-color and border-color to go with it.

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Cards:
// For MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'