Rate this docs

Angular Bootstrap Cards

Angular cards - Bootstrap 4 & Material Design

Angular Bootstrap cards are components which display content build of different elements with characteristic shadows, depth and hover effects.

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


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

            <!--Title-->
            <mdb-card-title>
              <h4>Card Title</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>

      

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 -->
        <mdb-card>
          <div class="view rgba-white-slight waves-light" mdbWavesEffect>
            <!-- Card img -->
            <mdb-card-img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap"></mdb-card-img>
            <a>
              <div class="mask"></div>
            </a>
          </div>
          <!--Card content-->
          <mdb-card-body>
            <!--Title-->
            <mdb-card-title>
              <h4>Card Title</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>
        <!-- Card -->

      

Cascading cards MDB Pro component

Add cascade="true" to the mdb-card to achieve cascading effect. You can manipulate the width of the image by adding wider="true" or narrower="true" class to the mdb-card.

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="row">
          <div class="col-md-4">
            <!--Card-->
            <mdb-card cascade="true" wider="true">

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

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

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

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

              </mdb-card-body>
              <!--/.Card content-->

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

          <div class="col-md-4">
            <!--Card-->
            <mdb-card cascade="true" narrower="true">

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

              <mdb-card-body cascade="true" class="text-center">
                <!--Card content-->
                <h5 class="pink-text">
                  <i class="fa fa-cutlery"></i> Culinary</h5>
                <!--Title-->
                <h4 class="card-title">Cheat day inspirations</h4>
                <!--Text-->

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

                <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

              </mdb-card-body>
              <!--/.Card content-->

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

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

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

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

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

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

              </mdb-card-body>
              <!--/.Card content-->

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

      

Cascading panels MDB Pro component

Ally Cook

Follow me

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




        <div class="col-lg-4 col-md-12">
          <!--Card-->
          <mdb-card cascade="true" narrower="true">

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

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

              <mdb-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.
              </mdb-card-text>

            </mdb-card-body>
            <!--/.Card content-->

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

        <div class="col-lg-4 col-md-6">
          <!--Card-->
          <mdb-card cascade="true" wider="true">

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

            <mdb-card-body cascade="true" class="text-center">

              <mdb-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.
              </mdb-card-text>

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

            </mdb-card-body>
            <!--/.Card content-->

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

        <div class="col-lg-4 col-md-6">
          <!--Card-->
          <mdb-card cascade="true">

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

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

              <mdb-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.
              </mdb-card-text>

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

            </mdb-card-body>
            <!--/.Card content-->

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

      

Reversed cascade MDB Pro component

My adventure

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.



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

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

            <!--Title-->
            <mdb-card-title>
              <h4>
                <strong>My adventure</strong>
              </h4>
            </mdb-card-title>

            <h5 class="indigo-text">
              <strong>Photography</strong>
            </h5>

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

            <!--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>
          </mdb-card-body>

        </mdb-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-->
        <mdb-card>

          <!--Card image-->
          <div class="view overlay waves-light" mdbWavesEffect>
            <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/food.jpg"></mdb-card-img>
            <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-->
          <mdb-card-body>

            <!--Title-->
            <mdb-card-title>
              <h4>Card title</h4>
            </mdb-card-title>

            <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>
          </mdb-card-body>
          <!--/.Card content-->
          <!-- Card footer -->
          <mdb-card-footer 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>
          </mdb-card-footer>
          <!-- Card footer -->
        </mdb-card>
        <!--/.Card-->

      

Flat buttons MDB Pro component

The 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


        <!--Card-->
        <mdb-card>

          <!--Card image-->
          <div class="view overlay waves-light" mdbWavesEffect>
            <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg"></mdb-card-img>
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <mdb-card-body>
            <a class="activator px-3 mr-2">
              <i class="fa fa-share-alt"></i>
            </a>

            <!--Title-->
            <mdb-card-title>
              <h4>Card title</h4>
            </mdb-card-title>

            <hr>

            <!--Text-->
            <mdb-card-text>
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </mdb-card-text>

            <a class="link-text">
              <h5 class="waves-light" mdbWavesEffect>Read more
                <i class="fa fa-chevron-right waves-light" mdbWavesEffect></i>
              </h5>
            </a>
          </mdb-card-body>
          <!--/.Card content-->
        </mdb-card>
        <!--/.Card-->

      

The dark 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="row">
          <div class="col-md-4 mx-auto my-5">
            <!--Card-->
            <mdb-card dark="true">

              <!--Card image-->
              <div class="view overlay waves-light" mdbWavesEffect>
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg"></mdb-card-img>
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/.Card image-->

              <!--Card content-->
              <mdb-card-body class="elegant-color white-text">
                <a class="activator px-3 mr-2">
                  <i class="fa fa-share-alt white-text"></i>
                </a>

                <!--Title-->
                <mdb-card-title>
                  <h4>Card title</h4>
                </mdb-card-title>

                <hr class="hr-light">

                <!--Text-->

                <mdb-card-text class="white-text">
                  Some quick example text to build on the card title and make up the bulk of the card's content.
                </mdb-card-text>

                <a href="#!" class="white-text d-flex justify-content-end">
                  <h5 class="waves-light white-text" mdbWavesEffect>Read more
                    <span>
                      <i class="fa fa-chevron-right pl-2 waves-light" mdbWavesEffect></i>
                    </span>
                  </h5>
                </a>
              </mdb-card-body>
              <!--/.Card content-->
            </mdb-card>
            <!--/.Card-->
          </div>
        </div>

      

Testimonial card MDB Pro component

To change a background color use one of over 300 color classes from our colors or gradients 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">

            <mdb-card class="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>

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

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

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

            <!--Card-->
            <mdb-card class="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">
              </div>

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

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

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

      

Image overlay

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 mdbBtn color="pink" class="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 mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect><i class="fa fa-clone left"></i> View
                project</a>
            </div>
          </div>
          <!-- Content -->
        </div>
        <!-- Card -->

      

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card title

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

Card title

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

Card title

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



        <div class="card-group">
          <!-- Card -->
          <mdb-card>
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>

          <!-- Card -->
          <mdb-card>
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>

          <!-- Card -->
          <mdb-card>
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>
        </div>

      

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card title

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

Card title

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

Card title

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



        <div class="card-deck">
          <!-- Card -->
          <mdb-card>
            <div class="view overlay waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>

          <!-- Card -->
          <mdb-card>
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/14.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>

          <!-- Card -->
          <mdb-card>
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <!-- Card img -->
              <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/15.jpg" alt="Card image cap"></mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <!--Card content-->
            <mdb-card-body>
              <!--Title-->
              <mdb-card-title>
                <h4>Card Title</h4>
              </mdb-card-title>

              <!--Text-->
              <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                content.
              </mdb-card-text>

              <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
            </mdb-card-body>
          </mdb-card>
        </div>

      

Angular Cards - API

In this section you will find informations about cards and its required modules and available inputs, outputs, methods and events.


Modules used

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.

// MDB Angular Pro
import { ButtonsModule, WavesModule, CardsFreeModule } from 'ng-uikit-pro-standard'
// MDB Angular Pro
import { ButtonsModule, WavesModule, CardsFreeModule } from 'angular-bootstrap-md'

Inputs

MdbCardComponent
Name Type Default Description Example
cascade boolean false Allow to set a cascade styles to the card. cascade="true"
wider boolean false Allow to set a wider styles to the card. wider="true"
narrower boolean false Allow to set a narrower styles to the card. narrower="true"
reverse boolean false Allow to reverse the styles of a card. reverse="true"
dark boolean false Allow to set a dark styles to the card. dark="true"
bgColor string ' ' Allow to add background color to the card by using class. bgColor="bg-primary"
borderColor string ' ' Allow to add border color to the card by using class. borderColor="border-primary"
MdbCardImageComponent
Name Type Default Description Example
src string ' ' Allow to set an image url for the card. src="img/image1.png"
alt boolean false Allow to set a alt attribute to the card image. alt="Alt image"