Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.
Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site
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.
If you are looking for Product Cards have a look at our E-commerce section
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content
like images, feel free to put the .card-block
class on the .card
element to consolidate your markup.
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-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
You can improve your card by adding a waves effect to the image together with a subtle hover effect.
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 overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
<div class="col-md-4">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" class="img-fluid">
<a href="#!">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title"><strong>Alice Mayer</strong></h4>
<h5>Photographer</h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<!--Dribbble-->
<a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
<!--Linkedin-->
<a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
<!--Google +-->
<a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!--Instagram-->
<a class="icons-sm ins-ic"><i class="fa fa-instagram"> </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 hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
<!--Title-->
<h4 class="card-title">Let your startup grow!</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-primary">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 hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title"><strong>Billy Cullen</strong></h4>
<h5>Web developer</h5>
<p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
</p>
<!--Facebook-->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Button-->
<a class="btn-floating btn-action"><i class="fa fa-chevron-right"></i></a>
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
<!-- Card footer -->
<div class="card-data">
<ul>
<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>
<!-- Card footer -->
</div>
<!--/.Card-->
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<!--Card Light-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2851%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Social shares button-->
<a class="activator"><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 href="#" class="black-text d-flex flex-row-reverse"><h5 class="waves-effect p-2">Read more <i class="fa fa-chevron-right"></i></h5></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Light-->
Add a class .card-dark
to use a dark variation.
<!--Card Dark-->
<div class="card card-dark">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2854%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Social shares button-->
<a class="activator"><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 href="#" class="d-flex flex-row-reverse"><h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i></h5></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Dark-->
To change a background color use one of over 300 color classes from our palette.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
<!--Card-->
<div class="card testimonial-card">
<!--Bacground color-->
<div class="card-up default-color-dark">
</div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%288%29.jpg" class="rounded-circle img-responsive">
</div>
<div class="card-block">
<!--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-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
<!--Rotating card-->
<div class="card-wrapper">
<div id="card-1" class="card-rotating effect__click">
<!--Front Side-->
<div class="face front">
<!-- Image-->
<div class="card-up">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
</div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
</div>
<!--Content-->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
</div>
</div>
<!--/.Front Side-->
<!--Back Side-->
<div class="face back">
<!--Content-->
<h4>About me</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
<hr>
<!--Social Icons-->
<ul class="inline-ul">
<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>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>
</div>
<!--/.Back Side-->
</div>
</div>
<!--/.Rotating card-->
Turn an image into a card background and overlay your card’s text.
<!--Card-->
<div class="card-overlay" style="background-image: url('https://mdbootstrap.com/img/Photos/Exposure/Dark/courses.jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3>Project title</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-lg btn-white-outline"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</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 thebackground-color
andborder-color
to go with it.
<!--Card Inverse-->
<div class="card card-inverse">
<!--Image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Exposure/Dark/university.jpg" alt="Card image">
<!--Content-->
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<!--/.Card Inverse-->
Use card groups to render cards as a single, attached element with an equal width and height columns. By default, card groups use display: table;
and table-layout: fixed;
to achieve their uniform sizing. However, enabling
flexbox mode can switch that to use display: flex;
and provide the same effect.
Only applies to small devices and above.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
ButtonLast updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Social reveal Premium component
Click on the button to launch the animation.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.