Rate this docs

React Bootstrap Cards

React Cards - Bootstrap 4 & Material Design

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


          import React from 'react';
          import { Button, Card, CardBody, CardImage, CardTitle, CardText, Col } from 'mdbreact';

          class CardExample extends React.Component {
            render() {
              return (
                <Col>
                  <Card style={{ width: "22rem" }}>
                    <CardImage
                      className="img-fluid"
                      src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg"
                      waves
                    />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>
                        Some quick example text to build on the card title and make
                        up the bulk of the card&apos;s content.
                      </CardText>
                      <Button href="#">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
              )
            }
          }

          export default CardExample;

      

Flipping card

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


          import React from 'react';
          import { FlippingCard, Card, CardBody, Col, Fa, CardUp, Avatar } from 'mdbreact';

          class CardExample extends React.Component {

            state = {
              flipped: false
            }

            handleFlipping = () => {
              this.setState({ flipped: !this.state.flipped });
            }

            render() {
              return (
                <Col style={{ minHeight: '26rem' }}>
                  <FlippingCard
                    flipped={this.state.flipped}
                    className="text-center h-100 w-100"
                    style={{ maxWidth: "22rem" }}
                  >
                    <Card className="face front">
                      <CardUp>
                        <img
                          className="card-img-top"
                          src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg"
                          alt=""
                        />
                      </CardUp>
                      <Avatar className="mx-auto white" circle>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg"
                          alt=""
                          className="rounded-circle"
                        />
                      </Avatar>
                      <CardBody>
                        <h4 className="font-weight-bold mb-3">Marie Johnson</h4>
                        <p className="font-weight-bold blue-text">Web developer</p>
                        <a
                          href="#!"
                          className="rotate-btn"
                          data-card="card-1"
                          onClick={this.handleFlipping}
                        >
                          <Fa icon="repeat" /> Click here to rotate
                        </a>
                      </CardBody>
                    </Card>
                    <Card className="face back">
                      <CardBody>
                        <h4 className="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 className="list-inline py-2">
                          <li className="list-inline-item">
                            <a href="#!" className="p-2 fa-lg fb-ic">
                              <Fa icon="facebook" />
                            </a>
                          </li>
                          <li className="list-inline-item">
                            <a href="#!" className="p-2 fa-lg tw-ic">
                              <Fa icon="twitter" />
                            </a>
                          </li>
                          <li className="list-inline-item">
                            <a href="#!" className="p-2 fa-lg gplus-ic">
                              <Fa icon="google-plus" />
                            </a>
                          </li>
                          <li className="list-inline-item">
                            <a href="#!" className="p-2 fa-lg li-ic">
                              <Fa icon="linkedin" />
                            </a>
                          </li>
                        </ul>
                        <a
                          href="#!"
                          className="rotate-btn"
                          data-card="card-1"
                          onClick={this.handleFlipping}
                        >
                          <Fa icon="undo" /> Click here to rotate back
                        </a>
                      </CardBody>
                    </Card>
                  </FlippingCard>
                </Col>
              )
            }
          }

          export default CardExample;

      

React Cards - API

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


Cards import statement

In order to use Cards make sure you have imported proper modules first.


        import { 
          MDBCard,
          MDBCardBody,
          MDBCardImage,
          MDBCardUp,
          MDBCardTitle,
          MDBCardText,
          MDBAvatar,
          MDBFlippingCard 
        } from "mdbreact";
      

API Reference: Card Properties

The table below shows the configuration options of the MDBCard component.

Name Type Default Description Example
border String Sets border color <MDBCard border="default" />
cascade Boolean false Switches the Card to cascade style mode <MDBCard cascade />
className String Adds custom classes <MDBCard className="customClass" />
collection Boolean false Switches on styles for collection Card <MDBCard collection />
ecommerce Boolean false Switches on styles for ecommerce Card <MDBCard ecommerce />
narrow Boolean false Makes cascading Card content body wider than header <MDBCard narrow />
news Boolean false Switches on styles for news Card <MDBCard news />
personal Boolean false Switches on styles for personal Card <MDBCard personal />
pricing Boolean false Switches on styles for pricing Card <MDBCard pricing />
reverse Boolean false Makes Card header wider and places content body on the header <MDBCard reverse />
tag String div Changes the default html tag for Card component <MDBCard tag="div" />
testimonial Boolean false Switches on styles for testimonial Card <MDBCard testimonial />
wide Boolean false Makes cascading Card header wider than content body <MDBCard wide />

API Reference: CardBody Properties

The table below shows the configuration options of the MDBCardBody component.

Name Type Default Description Example
cascade Boolean false Switches the CardBody to cascade style mode <MDBCardBody cascade />
className String Adds custom classes <MDBCardBody className="customClass" />
tag String div Changes the default html tag for CardBody component <MDBCardBody tag="div" />

API Reference: CardImage Properties

The table below shows the configuration options of the MDBCardImage component.

Name Type Default Description Example
alt String Alternative text when image does not load <MDBCardImage alt="Image" />
cascade Boolean false Switches the CardImage to cascade style mode <MDBCardImage cascade />
className String Adds custom classes <MDBCardImage className="customClass" />
hover Boolean false Switches on hover behaviour <MDBCardImage hover />
overlay String white-slight Sets the color of hover overlay <MDBCardImage overlay="white-light" />
src String URL of the image <MDBCardImage src="https://yourimage" />
tag String img Changes the default html tag for CardImage component <MDBCardImage tag="div" />
top Boolean false Makes image fluid <MDBCardImage top />
waves Boolean true Switches on waves effect <MDBCardImage waves />

API Reference: CardUp Properties

The table below shows the configuration options of the MDBCardUp component.

Name Type Default Description Example
className String Adds custom classes <MDBCardUp className="customClass" />
color String Sets background color <MDBCardUp color="indigo" />
gradient String Sets background gradient <MDBCardUp gradient="aqua" />
tag String img Changes the default html tag for CardUp component <MDBCardUp tag="div" />

API Reference: CardTitle Properties

The table below shows the configuration options of the MDBCardTitle component.

Name Type Default Description Example
className String Adds custom classes <MDBCardTitle className="customClass" />
sub Boolean false Styles title as subtitle <MDBCardTitle sub />
tag String img Changes the default html tag for component <MDBCardTitle tag="div" />

API Reference: CardText Properties

The table below shows the configuration options of the MDBCardText component.

Name Type Default Description Example
className String Adds custom classes <MDBCardText className="customClass" />
muted Boolean false Mutes the text color <MDBCardText muted />
small Boolean false Uses html small as component's tag <MDBCardText small />
tag String img Changes the default html tag for component <MDBCardText tag="div" />

API Reference: FlippingCard Properties

The table below shows the configuration options of the MDBFlippingCard component.

Name Type Default Description Example
className String Adds custom classes <MDBFlippingCard className="customClass" />
flipped Boolean false Flipps the Card initially <MDBFlippingCard flipped />
innerTag String div Changes the default html tag for component <MDBFlippingCard innerTag="div" />
tag String div Changes the default html tag for component's wrapper <MDBFlippingCard tag="div" />

React Cards - examples & customization

Quickly get a project started with any of our examples.


Waves effect

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


          import React, { Component } from 'react';
          import { Button, Card, CardBody, CardImage, CardTitle, CardText, Col } from 'mdbreact';

          class CardExample extends Component {
            render() {
              return (
                <Col style={{ maxWidth: "22rem" }}>
                  <Card>
                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" waves />
                    <CardBody>
                        <CardTitle>Card title</CardTitle>
                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                        <Button href="#">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
              )
            }
          }

          export default CardExample;

      

Cascading cards MDB Pro 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.



          import React, { Component } from 'react';
          import { Button, Card, CardBody, CardImage, CardTitle, CardText, Row, Col } from 'mdbreact';

          class CardExample extends Component {
            render() {
              return (
                <Row>
                  <Col>
                    <Card wide>
                      <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
                      <CardBody cascade>
                          <CardTitle>Card title</CardTitle>
                          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                          <Button href="#">Button</Button>
                      </CardBody>
                    </Card>
                  </Col>
                  <Col>
                    <Card narrow>
                      <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
                      <CardBody cascade>
                        <CardTitle>Card title</CardTitle>
                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                        <Button href="#">Button</Button>
                      </CardBody>
                    </Card>
                  </Col>
                  <Col>
                    <Card cascade>
                      <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
                      <CardBody cascade>
                          <CardTitle>Card title</CardTitle>
                          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                          <Button href="#">Button</Button>
                      </CardBody>
                    </Card>
                  </Col>
                </Row>
              )
            }
          }

          export default CardExample;

      

Cascading panels

Mattonit

The Boar

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

Title of the news

26.07.2017

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

Read more

Marta

Deserve for her own card

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




            import React, { Component } from 'react';
            import { Button, Card, CardBody, CardImage, CardTitle, CardText, Row, Col, Fa } from 'mdbreact';

            class CardExample extends Component {
              render() {
                return (
                  <Row>
                    <Col style={{ maxWidth: "22rem" }}>
                      <Card wide>
                        <CardImage className="view view-cascade gradient-card-header peach-gradient" cascade tag="div">
                          <h2 className="h2-responsive mb-2">Title of the news</h2>
                          <p className=""><Fa icon="calendar" />  26.07.2017</p>
                        </CardImage>
                        <CardBody cascade>
                          <CardTitle>Card title</CardTitle>
                          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                          <Button href="#">Button</Button>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col style={{ maxWidth: "22rem" }}>
                      <Card narrow>
                        <CardImage className="view view-cascade gradient-card-header purple-gradient" cascade tag="div">
                          <h2 class="h2-responsive">Mattonit</h2>
                          <p>The Boar</p>
                          <div class="text-center">
                            <Button color="purple" floating size="sm"><Fa icon="facebook" /></Button>
                            <Button color="purple" floating size="sm"><Fa icon="twitter" /></Button>
                            <Button color="purple" floating size="sm"><Fa icon="facebook" /></Button>
                          </div>
                        </CardImage>
                        <CardBody cascade>
                          <CardTitle>Card title</CardTitle>
                          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                          <Button href="#">Button</Button>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                )
              }
            }

            export default CardExample;

        

Reversed cascade

My adventure

Photography

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



          import React, { Component } from 'react';
          import { Card, CardBody, CardImage, CardTitle, CardText, Row, Col, Fa } from 'mdbreact';

          class CardExample extends Component {
            render() {
              return (
                <Row>
                  <Col style={{ maxWidth: "40rem" }}>
                    <Card reverse>
                      <CardImage cascade style={{ height: '20rem'}} src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" />
                      <CardBody cascade className="text-center">
                        <CardTitle>My adventure</CardTitle>
                        <h5 className="indigo-text"><strong>Photography</strong></h5>
                        <CardText>Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</CardText>
                        <a href="#!" className="icons-sm li-ic ml-1"><Fa icon="linkedin" /></a>
                        <a href="#!" className="icons-sm tw-ic ml-1"><Fa icon="twitter" /></a>
                        <a href="#!" className="icons-sm fb-ic ml-1"><Fa icon="facebook" /></a>
                      </CardBody>
                    </Card>
                  </Col>
                </Row>
              )
            }
          }

          export default CardExample;


      


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

Read more

            import React, { Component } from 'react';
            import { Button, Card, CardBody, CardImage, CardTitle, CardText, Row, Col, Fa } from 'mdbreact';

            class CardExample extends Component {
              render() {
                return (
                  <Row>
                    <Col style={{maxWidth: "22rem"}}>
                      <Card>
                        <CardImage
                          top
                          src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg"
                          overlay="white-slight"
                          hover
                          waves
                          alt="Card image cap"
                        />
                        <CardBody>
                          <a href="#!" className="activator waves-effect waves-light mr-4">
                            <Fa icon="share-alt" />
                          </a>
                          <CardTitle>Card Title</CardTitle>
                          <hr />
                          <CardText>
                            Some quick example text to build on the card title and make
                            up the bulk of the card&apos;s content.
                          </CardText>
                          <a href="#!" className="black-text d-flex justify-content-end" >
                            <h5>
                              Read more <Fa icon="angle-double-right" />
                            </h5>
                          </a>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                )
              }
            }

            export default CardExample;
        

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

            import React, { Component } from 'react';
            import { Card, CardBody, CardImage, CardTitle, CardText, Row, Col, Fa } from 'mdbreact';

            class CardExample extends Component {
              render() {
                return (
                  <Row>
                    <Col style={{maxWidth: "22rem"}}>
                      <Card>
                        <CardImage
                          top
                          src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg"
                          overlay="white-slight"
                          hover
                          waves
                          alt="Card image cap"
                        />
                        <CardBody className="elegant-color white-text rounded-bottom">
                          <a href="#!" className="activator waves-effect waves-light mr-4" >
                            <Fa icon="share-alt" />
                          </a>
                          <CardTitle>Card Title</CardTitle>
                          <hr className="hr-light" />
                          <CardText className="white-text">
                            Some quick example text to build on the card title and make
                            up the bulk of the card&apos;s content.
                          </CardText>
                            <a href="#!" className="black-text d-flex justify-content-end" >
                            <h5 className="white-text">
                              Read more <Fa icon="angle-double-right" />
                            </h5>
                          </a>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                )
              }
            }

            export default CardExample;
        

Testimonial card

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


            import React, { Component } from 'react';
            import { Card, CardBody, CardUp, Avatar, Row, Col, Fa } from 'mdbreact';

            class CardExample extends Component {
              render() {
                return (
                  <Row>
                    <Col style={{maxWidth: "22rem"}}>
                      <Card testimonial>
                        <CardUp className="indigo lighten-1" />
                        <Avatar className="mx-auto white">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"
                            alt=""
                          />
                        </Avatar>
                        <CardBody>
                          <h4 className="card-title">Anna Doe</h4>
                          <hr />
                          <p>
                            <Fa icon="quote-left" /> Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Eos, adipisci
                          </p>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col style={{maxWidth: "22rem"}}>
                      <Card testimonial>
                        <CardUp gradient="aqua" />
                        <Avatar className="mx-auto white">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg"
                            alt=""
                          />
                        </Avatar>
                        <CardBody>
                          <h4 className="card-title">Martha Smith</h4>
                          <hr />
                          <p>
                            <Fa icon="quote-left" /> Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Eos, adipisci
                          </p>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                )
              }
            }

            export default CardExample;
        

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


          import React, { Component } from 'react';
          import { Card, CardTitle, Button, Row, Col, Fa } from 'mdbreact';

          class CardExample extends Component {
          render() {
          return (
          <Row>
            <Col>
            <Card className="card-image" style={{ backgroundImage: "url'https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg')"
                      }}>
              <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                  <h5 className="pink-text">
                    <Fa icon="pie-chart" /> Marketing
                  </h5>
                  <CardTitle tag="h3" className="pt-2">
                    <strong>This is card title</strong>
                  </CardTitle>
                  <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>
                  <Button color="pink">
                    <Fa icon="clone left" /> View project
                  </Button>
                </div>
              </div>
            </Card>
            </Col>
            <Col>
            <Card className="card-image" style={{
                        backgroundImage:
                          "url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')"
                      }}>
              <div className="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
                <div>
                  <h5 className="orange-text">
                    <Fa icon="desktop" /> Software
                  </h5>
                  <CardTitle tag="h3" className="pt-2">
                    <strong>This is card title</strong>
                  </CardTitle>
                  <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>
                  <Button color="deep-orange">
                    <Fa icon="clone left" /> View project
                  </Button>
                </div>
              </div>
            </Card>
            </Col>
          </Row>
          )
          }
          }

          export default CardExample;


        

Card groups

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.


          import React, { Component } from "react";
          import {
            Card,
            CardTitle,
            Button,
            CardGroup,
            CardImage,
            CardText, CardBody
          } from "mdbreact";

          class CardExample extends Component {
            render() {
              return (
                  <CardGroup>
                    <Card>
                      <CardImage
                        src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg"
                        alt="Card image cap"
                        top
                        hover
                        overlay="white-slight"
                      />
                      <CardBody>
                        <CardTitle tag="h5">Panel title</CardTitle>
                        <CardText>
                          Some quick example text to build on the card title and make up
                          the bulk of the card's content.
                        </CardText>
                        <Button color="primary" size="md">
                          read more
                        </Button>
                      </CardBody>
                    </Card>

                    <Card>
                      <CardImage
                        src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg"
                        alt="Card image cap"
                        top
                        hover
                        overlay="white-slight"
                      />
                      <CardBody>
                        <CardTitle tag="h5">Panel title</CardTitle>
                        <CardText>
                          Some quick example text to build on the card title and make up
                          the bulk of the card's content.
                        </CardText>
                        <Button color="primary" size="md">
                          read more
                        </Button>
                      </CardBody>
                    </Card>

                    <Card>
                      <CardImage
                        src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg"
                        alt="Card image cap"
                        top
                        hover
                        overlay="white-slight"
                      />
                      <CardBody>
                        <CardTitle tag="h5">Panel title</CardTitle>
                        <CardText>
                          Some quick example text to build on the card title and make up
                          the bulk of the card's content.
                        </CardText>
                        <Button color="primary" size="md">
                          read more
                        </Button>
                      </CardBody>
                    </Card>
                  </CardGroup>
              );
            }
          }

          export default CardExample;