Rate this docs

Vue Bootstrap Cards

Vue Cards - Bootstrap 4 & Material Design

Vue 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

        <template>
          <mdb-card>
            <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%286%29.jpg" alt="Card image cap"></mdb-card-image>
            <mdb-card-body>
              <mdb-card-title>Basic card</mdb-card-title>
              <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>
              <mdb-btn color="primary">Button</mdb-btn>
            </mdb-card-body>
          </mdb-card>
        </template>
        
        <script>
          import { mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn } from 'mdbvue';

          export default {
            name: 'CardPage',
            components: {
              mdbCard,
              mdbCardImage,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbBtn
            }
          };
        </script>
      

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

        <template>
          <mdb-card>
            <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"
              waves></mdb-card-image>
            <mdb-card-body>
              <mdb-card-title>Card with waves effect</mdb-card-title>
              <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>
              <mdb-btn color="primary">Button</mdb-btn>
            </mdb-card-body>
          </mdb-card>
        </template>
        
        <script>
          import { mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn } from 'mdbvue';

          export default {
            name: 'CardPage',
            components: {
              mdbCard,
              mdbCardImage,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbBtn
            }
          };
        </script>
      

Cascading cards MDB Pro component

Add cascade attribute to <mdb-card> to achieve cascading effect or wide / narrow to consider width relation of <mdb-card-image> to the <mdb-card> component.

Wider

Alice Mayer

Photographer

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 Cullen

Web developer

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


        <template>
          <mdb-container>
            <h4 class="pb-2">Cascading cards</h4>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card wide>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <mdb-card-title><strong>Alice Mayer</strong></mdb-card-title>
                    <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>
                    <a class="fa-lg li-ic px-2">
                      <mdb-icon icon="linkedin" /></a>
                    <a class="fa-lg tw-ic px-2">
                      <mdb-icon icon="twitter" /></a>
                    <a class="fa-lg fb-ic px-2">
                      <mdb-icon icon="facebook" /></a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card narrow>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body cascade>
                    <h5 class="pink-text pb-2 pt-1">
                      <mdb-icon icon="cutlery" /> Culinary</h5>
                    <mdb-card-title>Cheat day inspirations</mdb-card-title>
                    <mdb-card-text>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
                      laboriosam, nisi ut aliquid ex ea commodi.</mdb-card-text>
                    <mdb-btn color="unique">Button</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card cascade>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <mdb-card-title><strong>Billy Cullen</strong></mdb-card-title>
                    <h5>Web developer</h5>
                    <mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
                      recusandae. Facere modi sunt, quod quibusdam.</mdb-card-text>
                    <mdb-btn tag="a" floating small class="btn-fb">
                      <mdb-icon icon="facebook" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating small class="btn-tw">
                      <mdb-icon icon="twitter" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating small class="btn-dribbble">
                      <mdb-icon icon="dribbble" />
                    </mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        <script>
          import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardImage, mdbCardHeader, mdbCardBody, mdbCardTitle, mdbCardText, mdbCardFooter, mdbCardUp, mdbCardAvatar, mdbCardGroup, mdbBtn, mdbView, mdbMask, mdbIcon } from 'mdbvue';

          export default {
            name: 'CardProPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbCard,
              mdbCardImage,
              mdbCardHeader,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbCardFooter,
              mdbCardUp,
              mdbCardAvatar,
              mdbCardGroup,
              mdbBtn,
              mdbView,
              mdbMask,
              mdbIcon
            }
          };
        </script>
      

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

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



        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card narrow>
                  <mdb-view gradient="purple" cascade>
                    <h2 class="h2-responsive">Mattonit</h2>
                    <p>The Boar</p>
                    <mdb-btn tag="a" floating transparent small>
                      <mdb-icon icon="facebook" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating transparent small>
                      <mdb-icon icon="twitter" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating transparent small>
                      <mdb-icon icon="google-plus" />
                    </mdb-btn>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <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 commod</mdb-card-text>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card wide>
                  <mdb-view gradient="peach" cascade>
                    <h2 class="h2-responsive">Title of the news</h2>
                    <p>
                      <mdb-icon icon="calendar" /> 26.07.2017</p>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <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 class="orange-text mt-1 d-flex flex-row-reverse">
                      <h5 class="p-2" waves>Read more
                        <mdb-icon icon="angle-double-right" class="ml-2" />
                      </h5>
                    </a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card cascade>
                  <mdb-view gradient="blue" cascade>
                    <h2 class="h2-responsive">Marta</h2>
                    <p>Deserves her own card</p>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <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>
                    <hr />
                    <a class="px-2 fa-lg li-ic">
                      <mdb-icon icon="linkedin" /></a>
                    <a class="px-2 fa-lg tw-ic">
                      <mdb-icon icon="twitter" /></a>
                    <a class="px-2 fa-lg fb-ic">
                      <mdb-icon icon="facebook" /></a>
                    <a class="px-2 fa-lg email-ic">
                      <mdb-icon icon="envelope" /></a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

Reversed cascade

My adventure
Photography

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


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-card reverse>
                <mdb-view hover cascade>
                  <mdb-card-image src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Card image cap"></mdb-card-image>
                  <mdb-mask waves overlay="white-slight"></mdb-mask>
                </mdb-view>
                <mdb-card-body class="text-center" cascade>
                  <mdb-card-title><strong>My adventure</strong></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>
                  <a class="px-2 fa-lg li-ic">
                    <mdb-icon icon="linkedin" /></a>
                  <a class="px-2 fa-lg tw-ic">
                    <mdb-icon icon="twitter" /></a>
                  <a class="px-2 fa-lg fb-ic">
                    <mdb-icon icon="facebook" /></a>
                </mdb-card-body>
              </mdb-card>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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.


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/food.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-btn tag="a" floating action class="ml-auto mr-4 mdb-color lighten-3">
                    <mdb-icon icon="chevron-right" class="pl-1" />
                  </mdb-btn>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <hr />
                    <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>
                  <mdb-card-footer color="mdb-color" class="lighten-3 p-0 text-center">
                    <ul class="list-unstyled list-inline font-small mt-3">
                      <li class="list-inline-item pr-2 white-text">
                        <mdb-icon icon="clock-o" class="pr-1" />05/10/2015</li>
                      <li class="list-inline-item pr-2"><a href="#" class="white-text">
                        <mdb-icon icon="comments-o" class="pr-1" />12</a></li>
                      <li class="list-inline-item pr-2"><a href="#" class="white-text">
                        <mdb-icon icon="facebook" class="pr-1" />21</a></li>
                      <li class="list-inline-item"><a href="#" class="white-text">
                        <mdb-icon icon="twitter" class="pr-1" />5</a></li>
                    </ul>
                  </mdb-card-footer>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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

        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Light version</mdb-card-title>
                    <a class="activator p-3 mr-2">
                      <mdb-icon icon="share-alt" /></a>
                    <hr />
                    <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>Read more
                        <mdb-icon icon="chevron-right" class="pl-1" />
                      </h5>
                    </a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

Dark version

Add a prop 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

        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card dark>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body color="elegant" class="white-text">
                    <mdb-card-title>Dark version</mdb-card-title>
                    <a class="activator p-3 mr-2">
                      <mdb-icon icon="share-alt" /></a>
                    <hr class="hr-light" />
                    <p class="font-small mb-3">Some quick example text to build on the card title and make up the
                      bulk of the card's content.</p>
                    <a class="d-flex justify-content-end">
                      <h5>Read more
                        <mdb-icon icon="chevron-right" class="pl-2" />
                      </h5>
                    </a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card testimonial>
                  <mdb-card-up color="indigo" class="lighten-1"></mdb-card-up>
                  <mdb-card-avatar color="white" class="mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="rounded-circle"></mdb-card-avatar>
                  <mdb-card-body>
                    <mdb-card-title>Anna Doe</mdb-card-title>
                    <hr />
                    <p>
                      <mdb-icon icon="quote-left" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
                      adipisci</p>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card testimonial>
                  <mdb-card-up gradient="aqua" class="lighten-1"></mdb-card-up>
                  <mdb-card-avatar color="white" class="mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle"></mdb-card-avatar>
                  <mdb-card-body>
                    <mdb-card-title>Martha Smith</mdb-card-title>
                    <hr />
                    <p>
                      <mdb-icon icon="quote-left" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
                      adipisci</p>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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

        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="6">
                <mdb-card class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                  <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 icon="pie-chart" /> Marketing</h5>
                      <mdb-card-title tag="h3" class="pt-2"><strong>This is card title</strong></mdb-card-title>
                      <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>
                      <mdb-btn color="pink"><mdb-icon icon="clone left" /> View project</mdb-btn>
                    </div>
                  </div>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="6">
                <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')">
                  <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 icon="desktop" /> Software</h5>
                      <mdb-card-title tag="h3" class="pt-2"><strong>This is card title</strong></mdb-card-title>
                      <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>
                      <mdb-btn color="deep-orange"><mdb-icon icon="clone left" /> View project</mdb-btn>
                    </div>
                  </div>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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.


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-card-group>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-card-group>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

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.


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-card-group deck>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/14.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
                <mdb-card>
                  <mdb-view hover>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/images/15.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body>
                    <mdb-card-title>Card title</mdb-card-title>
                    <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>
                    <mdb-btn color="primary">Read more</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-card-group>
            </mdb-row>
          </mdb-container>
        </template>
        
        (... Script part the same as in Cascading Cards ...)
      

Flipping cards MDB Pro component

Bootstrap flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction. The Vue component is in fact a wrapper taking in two cards (holding face front and face back classes) and a flipped boolean prop responsible for rendering either side. This way you can apply your own flip-firing logic wherever you like.

See the two basic Vue Bootstrap flipping card examples:

Image with a photo of clouds.
Sample avatar image.

Marie Johnson

Web developer

Click here to rotate

About me


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?


Click here to rotate back

        <template>
          <mdb-flipping-card :flipped="flipped" innerClass="text-center h-100 w-100" style="max-width: 22rem">
            <mdb-card class="face front">
              <mdb-card-up>
                <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="a photo of a house facade" />
              </mdb-card-up>
              <mdb-avatar class="mx-auto white" circle>
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle" />
              </mdb-avatar>
              <mdb-card-body>
                <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
                <p class="font-weight-bold blue-text">Web developer</p>
                <a class="rotate-btn" @click="flipped=true">
                  <mdb-icon icon="repeat" /> Click here to rotate</a>
              </mdb-card-body>
            </mdb-card>
            <mdb-card class="face back">
              <mdb-card-body>
                <h4 class="font-weight-bold">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 />
                <ul class="list-inline py-2">
                  <li class="list-inline-item"><a class="p-2 fa-lg fb-ic">
                    <mdb-icon icon="facebook" /></a></li>
                  <li class="list-inline-item"><a class="p-2 fa-lg tw-ic">
                    <mdb-icon icon="twitter" /></a></li>
                  <li class="list-inline-item"><a class="p-2 fa-lg gplus-ic">
                    <mdb-icon icon="google-plus" /></a></li>
                  <li class="list-inline-item"><a class="p-2 fa-lg li-ic">
                    <mdb-icon icon="linkedin" /></a></li>
                </ul>
                <a class="rotate-btn" @click="flipped=false">
                  <mdb-icon icon="undo" /> Click here to rotate back</a>
              </mdb-card-body>
            </mdb-card>
          </mdb-flipping-card>
        </template>
        
        <script>
          import { mdbCard, mdbCardBody, mdbCardTitle, mdbCardText, mdbCardUp, mdbBtn, mdbIcon, mdbFlippingCard, mdbAvatar } from 'mdbvue';

          export default {
            name: 'CardProPage',
            components: {
              mdbCard,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbCardUp,
              mdbBtn,
              mdbIcon,
              mdbFlippingCard,
              mdbAvatar
            },
            data() {
              return {
                flipped: false,
              };
            }
          };
        </script>
      

Click on the button to launch the animation.

Card title

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

Read more

Social shares


Join our community


        <template>
          <mdb-flipping-card :flipped="flipped" innerClass="h-100 w-100" style="max-width: 22rem">
            <mdb-card class="face front">
              <mdb-view hover>
                <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo5.jpg" alt="Example photo">
                <a>
                  <mdb-mask overlay="white-slight" /></a>
              </mdb-view>
              <mdb-card-body>
                <a class="rotate-btn float-right">
                  <mdb-icon icon="share-alt" class="fa-lg" @click.native="flipped=true"></mdb-icon>
                </a>
                <h4>Card title</h4>
                <hr>
                <mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi vel eius veniam maxime.</mdb-card-text>
                <a class="link-text">
                  <h5>Read more <mdb-icon icon="angle-double-right"></mdb-icon>
                  </h5>
                </a>
              </mdb-card-body>
            </mdb-card>
            <mdb-card class="face back">
              <div class="text-center">
                <mdb-card-title class="font-weight-bold my-4">Social shares
                  <mdb-icon icon="close" class="text-muted" @click.native="flipped=false" />
                </mdb-card-title>
                <hr />
                <ul class="list-unstyled d-flex justify-content-center flex-wrap list-inline my-4">
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="dribbble">
                      <mdb-icon icon="dribbble" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="slack">
                      <mdb-icon icon="slack" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="ins">
                      <mdb-icon icon="instagram" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="pin">
                      <mdb-icon icon="pinterest" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="tw">
                      <mdb-icon icon="twitter" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="gplus">
                      <mdb-icon icon="google-plus" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" floating color="git">
                      <mdb-icon icon="github" />
                    </mdb-btn>
                  </li>
                </ul>
                <h5 class="font-weight-bold my-4">Join our community</h5>
                <hr />
                <ul class="list-unstyled list-inline d-flex justify-content-center flex-wrap mt-4">
                  <li class="list-inline-item">
                    <mdb-btn tag="a" color="fb" class="px-4">
                      <mdb-icon icon="facebook" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" color="tw" class="px-4">
                      <mdb-icon icon="twitter" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" color="li" class="px-4">
                      <mdb-icon icon="linkedin" />
                    </mdb-btn>
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn tag="a" color="ins" class="px-4">
                      <mdb-icon icon="instagram" />
                    </mdb-btn>
                  </li>
                </ul>
              </div>
            </mdb-card>
          </mdb-flipping-card>
        </template>
        
        <script>
          import { mdbCard, mdbCardBody, mdbCardTitle, mdbCardText, mdbCardUp, mdbBtn, mdbView, mdbMask, mdbIcon, mdbFlippingCard } from 'mdbvue';

          export default {
            name: 'CardProPage',
            components: {
              mdbCard,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbCardUp,
              mdbBtn,
              mdbView,
              mdbMask,
              mdbIcon,
              mdbFlippingCard
            },
            data() {
              return {
                flipped: false,
              };
            }
          };
        </script>
      

Cards - API

In this section you will find advanced information about the Cards component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


import { mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
tag String 'div' Changes card's wrapper tag <mdb-card tag="p" />
cascade Boolean false Achieving cascading effect <mdb-card cascade />
wide Boolean false Achieving cascading wide effect <mdb-card wide />
narrow Boolean false Achieving cascading narrow effect <mdb-card narrow />
reverse Boolean false Achieving cascading reversed effect <mdb-card reverse />
dark Boolean false Changes light card into dark one <mdb-card dark />
testimonial Boolean false Changes card layout to testimonial <mdb-card testimonial />
personal Boolean false Changes card layout to personal <mdb-card personal />
news Boolean false Changes card layout to news <mdb-card news />
news Boolean false Changes card layout to news <mdb-card news />
ecommerce Boolean false Changes card layout to ecommerce <mdb-card ecommerce />
collection Boolean false Changes card layout to collection <mdb-card collection />
pricing Boolean false Changes card layout to pricing <mdb-card pricing />
color String Changes card color <mdb-card color="primary" />
textColor String Changes card textColor <mdb-card textColor="success" />
border String Changes card border <mdb-card border="warning" />