Angular Bootstrap Cards
Angular cards - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A newer
version is available for Bootstrap 5. We recommend migrating to the latest version of our
product -
Material Design for Bootstrap 5.
Go to docs v.5
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 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).webp" 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
.webp)
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).webp" 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
Narrower
.webp)
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
<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.webp"></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">
<mdb-icon fab icon="linkedin-in"> </mdb-icon>
</a>
<!--Twitter-->
<a class="px-2 icons-sm tw-ic">
<mdb-icon fab icon="twitter"> </mdb-icon>
</a>
<!--Dribbble-->
<a class="px-2 icons-sm fb-ic">
<mdb-icon fab icon="facebook-f"> </mdb-icon>
</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).webp"></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">
<mdb-icon fas icon="utensils"></mdb-icon> 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 mdbBtn color="unique" class="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.webp"></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" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" color="dribbble" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="dribbble"></mdb-icon>
</a>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Cascading cards with footer MDB Pro component
Add div with .card-footer class at the end of the
mdb-card-body element to add a footer to the cascading card.
Wider
Narrower
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
<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.webp"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/Card image-->
<mdb-card-body cascade="true" class="text-center pb-0">
<!--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">
<mdb-icon fab icon="linkedin-in"> </mdb-icon>
</a>
<!--Twitter-->
<a class="px-2 icons-sm tw-ic">
<mdb-icon fab icon="twitter"> </mdb-icon>
</a>
<!--Dribbble-->
<a class="px-2 icons-sm fb-ic">
<mdb-icon fab icon="facebook-f"> </mdb-icon>
</a>
<!-- Card footer -->
<div class="card-footer text-muted text-center mt-4">
2 days ago
</div>
</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).webp"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/Card image-->
<mdb-card-body cascade="true" class="text-center pb-0 px-0">
<!--Card content-->
<h5 class="pink-text">
<mdb-icon fas icon="utensils"></mdb-icon> 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 mdbBtn color="unique" class="waves-light" mdbWavesEffect>Button</a>
<!-- Card footer -->
<div class="card-footer text-muted text-center mt-4">
2 days ago
</div>
</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.webp"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/Card image-->
<mdb-card-body cascade="true" class="text-center pb-0 px-0">
<!--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" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" color="dribbble" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="dribbble"></mdb-icon>
</a>
<!-- Card footer -->
<div class="card-footer text-muted text-center mt-4">
2 days ago
</div>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Cascading panels MDB Pro component
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="row">
<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" mdbBtn floating="true" size="sm" class="waves-light" mdbWavesEffect>
<i class="fab fa-facebook-f"></i>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" class="waves-light" mdbWavesEffect>
<i class="fab fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-floating waves-light" mdbWavesEffect>
<i class="fab 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="">
<mdb-icon far icon="calendar"></mdb-icon> 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
<mdb-icon fas icon="chevron-right"></mdb-icon>
</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">
<mdb-icon fab icon="twitter" class="px-2"> </mdb-icon>
</a>
<!--Linkedin-->
<a class="icons-sm li-ic">
<mdb-icon fab icon="linkedin-in" class="px-2"> </mdb-icon>
</a>
<!--Facebook-->
<a class="icons-sm fb-ic">
<mdb-icon fab icon="facebook-f" class="px-2"> </mdb-icon>
</a>
<!--Email-->
<a class="icons-sm email-ic">
<mdb-icon fas icon="envelope" class="px-2"> </mdb-icon>
</a>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Reversed cascade MDB Pro component
.webp)
<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).webp"></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="px-2 icons-sm li-ic">
<mdb-icon fab icon="linkedin-in"> </mdb-icon>
</a>
<!--Twitter-->
<a class="px-2 icons-sm tw-ic">
<mdb-icon fab icon="twitter"> </mdb-icon>
</a>
<!--Dribbble-->
<a class="px-2 icons-sm fb-ic">
<mdb-icon fab icon="facebook-f"> </mdb-icon>
</a>
</mdb-card-body>
</mdb-card>
Action button & footer MDB Pro component
<!--Card-->
<mdb-card>
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/food.webp"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Button-->
<a mdbBtn floating="true" class="btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
<mdb-icon fas icon="chevron-right" class="pl-1 waves-light" mdbWavesEffect></mdb-icon>
</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">
<mdb-icon far icon="clock" class="pr-1"></mdb-icon>05/10/2015</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text">
<mdb-icon far icon="comments" class="pr-1"></mdb-icon>12</a>
</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text">
<mdb-icon fab icon="facebook-f" class="pr-1"> </mdb-icon>21</a>
</li>
<li class="list-inline-item">
<a href="#" class="white-text">
<mdb-icon fab icon="twitter" class="pr-1"> </mdb-icon>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.webp"></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">
<mdb-icon fas icon="share-alt"></mdb-icon>
</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
<mdb-icon fas icon="chevron-right" class="waves-light" mdbWavesEffect></mdb-icon>
</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.webp"></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">
<mdb-icon fas icon="share-alt" class="white-text"></mdb-icon>
</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>
<mdb-icon fas icon="chevron-right" class="pl-2 waves-light" mdbWavesEffect></mdb-icon>
</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.
Anna Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
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.webp" class="rounded-circle">
</div>
<mdb-card-body>
<!--Name-->
<mdb-card-title>
<h4>Anna Doe</h4>
</mdb-card-title>
<hr>
<!--Quotation-->
<p>
<mdb-icon fas icon="quote-left"></mdb-icon> 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.webp" class="rounded-circle">
</div>
<mdb-card-body>
<!--Name-->
<mdb-card-title>
<h4>Martha Smith</h4>
</mdb-card-title>
<hr>
<!--Quotation-->
<p>
<mdb-icon fas icon="quote-left"></mdb-icon> 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 projectSoftware
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
<div class="d-flex">
<!-- Card -->
<mdb-card
style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp')"
class="card-image mb-3 mx-2"
>
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text">
<mdb-icon fas icon="chart-pie"></mdb-icon>
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>
<mdb-icon far icon="clone" class="left"></mdb-icon>
View project</a
>
</div>
</div>
<!-- Content -->
</mdb-card>
<!-- Card -->
<!-- Card -->
<mdb-card
style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).webp')"
class="card-image mb-3 mx-2"
>
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
<div>
<h5 class="orange-text">
<mdb-icon fas icon="desktop"></mdb-icon>
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>
<mdb-icon far icon="clone" class="left"></mdb-icon>
View project</a
>
</div>
</div>
<!-- Content -->
</mdb-card>
<!-- Card -->
</div>
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.
<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.webp" 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.webp" 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.webp" 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.
<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.webp" 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.webp" 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.webp" 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.
import { ButtonsModule, WavesModule, CardsModule } from 'ng-uikit-pro-standard'
import { ButtonsModule, WavesModule, CardsModule } 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.webp" |
alt
|
boolean | false | Allow to set a alt attribute to the card image. | alt="Alt image" |