NextJS Material Kit PRO
Live Preview Report an issue

Cards

Styles

You will find the styles for these components in
styles/jss/nextjs-material-kit-pro/components/cardStyle.js
styles/jss/nextjs-material-kit-pro/components/cardHeaderStyle.js
styles/jss/nextjs-material-kit-pro/components/cardBodyStyle.js
styles/jss/nextjs-material-kit-pro/components/cardFooterStyle.js.

Example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

Card-img-cap

Card title

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

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";

import imagesStyles from "styles/jss/nextjs-material-kit-pro/imagesStyles.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  ...imagesStyles,
  cardTitle
};

const useStyles = makeStyles(style);

export default function CardExample() {
  const classes = useStyles();
  return (
    <Card style={{ width: "20rem" }}>
      <img
        style={{ height: "180px", width: "100%", display: "block" }}
        className={classes.imgCardTop}
        src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_163df23d717%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_163df23d717%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22119.0859375%22%20y%3D%2297.35%22%3E320x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        alt="Card-img-cap"
      />
      <CardBody>
        <h4 className={classes.cardTitle}>Card title</h4>
        <p>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <Button color="primary">Do something</Button>
      </CardBody>
    </Card>
  );
}

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the CardBody. Use it whenever you need a padded section within a card.

This is some text within a card body.
import React from "react";
// @material-ui/core components
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

export default function CardExampleBody() {
  return (
    <Card>
      <CardBody>This is some text within a card body.</CardBody>
    </Card>
  );
}

Titles, text, and links

Card titles are used by adding classes.cardTitle to a <h*> tag. In the same way, links are added and placed next to each other by adding classes.cardLink to an <a> tag.

Card Title

Card Subtitle

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

Card linkAnother link
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

import {
  cardTitle,
  cardLink,
  cardSubtitle
} from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  cardTitle,
  cardLink,
  cardSubtitle
};

const useStyles = makeStyles(style);

export default function CardExampleTitleTextLinks() {
  const classes = useStyles();
  return (
    <Card style={{ width: "20rem" }}>
      <CardBody>
        <h4 className={classes.cardTitle}>Card Title</h4>
        <h6 className={classes.cardSubtitle}>Card Subtitle</h6>
        <p>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a
          href="#pablo"
          className={classes.cardLink}
          onClick={e => e.preventDefault()}
        >
          Card link
        </a>
        <a
          href="#pablo"
          className={classes.cardLink}
          onClick={e => e.preventDefault()}
        >
          Another link
        </a>
      </CardBody>
    </Card>
  );
}

Images

Card-img-cap

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

import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

import imagesStyles from "styles/jss/nextjs-material-kit-pro/imagesStyles.js";

const style = {
  ...imagesStyles
};

const useStyles = makeStyles(style);

export default function CardExampleImages() {
  const classes = useStyles();
  return (
    <Card style={{ width: "20rem" }}>
      <img
        style={{ height: "180px", width: "100%", display: "block" }}
        className={classes.imgCardTop}
        src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"
        alt="Card-img-cap"
      />
      <CardBody>
        <p>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </CardBody>
    </Card>
  );
}

List groups

Create lists of contnet in a card using HTML tags as <ul>, <ol> and <li>

import React from "react";
// @material-ui/core components
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";

export default function CardExampleListGroups() {
  return (
    <Card style={{ width: "20rem" }}>
      <List component="nav">
        <ListItem>
          <ListItemText primary="Cras justo odio" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Dapibus ac facilisis in" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Vestibulum at eros" />
        </ListItem>
      </List>
    </Card>
  );
}

Featured
import React from "react";

// @material-ui/core components
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";

export default function CardExampleListGroupsHeader() {
  return (
    <Card style={{ width: "20rem" }}>
      <CardHeader color="danger">Featured</CardHeader>
      <List component="nav">
        <ListItem>
          <ListItemText primary="Cras justo odio" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Dapibus ac facilisis in" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Vestibulum at eros" />
        </ListItem>
      </List>
    </Card>
  );
}

Header and Footer


Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Button from "components/CustomButtons/Button.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  cardTitle
};

const useStyles = makeStyles(style);

export default function CardExampleHeaderAndFooter() {
  const classes = useStyles();
  return (
    <Card style={{ width: "20rem" }}>
      <CardHeader color="warning">Featured</CardHeader>
      <CardBody>
        <h4 className={classes.cardTitle}>Special title treatment</h4>
        <p>
          With supporting text below as a natural lead-in to additional content.
        </p>
        <Button color="primary">Do something</Button>
      </CardBody>
    </Card>
  );
}

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
import React from "react";
// @material-ui/core components
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Quote from "components/Typography/Quote.js";

export default function CardExampleQuote() {
  return (
    <Card>
      <CardHeader color="success">Quote</CardHeader>
      <CardBody>
        <Quote
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
          author="Someone famous in Source Title"
        />
      </CardBody>
    </Card>
  );
}

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  cardTitle,
  textCenter: {
    textAlign: "center"
  },
  textMuted: {
    color: "#6c757d"
  }
};

const useStyles = makeStyles(style);

export default function CardExampleFeatured() {
  const classes = useStyles();
  return (
    <Card className={classes.textCenter}>
      <CardHeader color="danger">Featured</CardHeader>
      <CardBody>
        <h4 className={classes.cardTitle}>Special title treatment</h4>
        <p>
          With supporting text below as a natural lead-in to additional content.
        </p>
        <Button color="primary">Do something</Button>
      </CardBody>
      <CardFooter className={classes.textMuted}>2 days ago</CardFooter>
    </Card>
  );
}

Text alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  cardTitle,
  textCenter: {
    textAlign: "center"
  },
  textRight: {
    textAlign: "right"
  }
};

const useStyles = makeStyles(style);

export default function CardExampleTextAlignment() {
  const classes = useStyles();
  return (
    <div>
      <Card style={{ width: "20rem" }}>
        <CardBody>
          <h4 className={classes.cardTitle}>Special title treatment</h4>
          <p>
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <Button color="primary">Do something</Button>
        </CardBody>
      </Card>
      <Card className={classes.textCenter} style={{ width: "20rem" }}>
        <CardBody>
          <h4 className={classes.cardTitle}>Special title treatment</h4>
          <p>
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <Button color="primary">Do something</Button>
        </CardBody>
      </Card>
      <Card className={classes.textRight} style={{ width: "20rem" }}>
        <CardBody>
          <h4 className={classes.cardTitle}>Special title treatment</h4>
          <p>
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <Button color="primary">Do something</Button>
        </CardBody>
      </Card>
    </div>
  );
}

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Card-img-cap

Card title

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

Card title

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

Card-img-cap
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

import imagesStyles from "styles/jss/nextjs-material-kit-pro/imagesStyles.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  ...imagesStyles,
  cardTitle,
  textMuted: {
    color: "#6c757d"
  }
};

const useStyles = makeStyles(style);

export default function CardExampleImageCaps() {
  const classes = useStyles();
  return (
    <div>
      <Card>
        <img
          className={classes.imgCardTop}
          src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"
          alt="Card-img-cap"
        />
        <CardBody>
          <h4 className={classes.cardTitle}>Card title</h4>
          <p>
            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>
            <small className={classes.textMuted}>Last updated 3 mins ago</small>
          </p>
        </CardBody>
      </Card>
      <Card>
        <CardBody>
          <h4 className={classes.cardTitle}>Card title</h4>
          <p>
            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>
            <small className={classes.textMuted}>Last updated 3 mins ago</small>
          </p>
        </CardBody>
        <img
          className={classes.imgCardBottom}
          src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"
          alt="Card-img-cap"
        />
      </Card>
    </div>
  );
}

Image overalys

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Card-img

Card title

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

import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";

import imagesStyles from "styles/jss/nextjs-material-kit-pro/imagesStyles.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  ...imagesStyles,
  cardTitle
};

const useStyles = makeStyles(style);

export default function CardExampleImageOverlays() {
  const classes = useStyles();
  return (
    <Card style={{ color: "white" }}>
      <img
        className={classes.imgCard}
        src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"
        alt="Card-img"
      />
      <div className={classes.imgCardOverlay}>
        <h4 className={classes.cardTitle} style={{ color: "white" }}>
          Card title
        </h4>
        <p>
          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>Last updated 3 mins ago</p>
      </div>
    </Card>
  );
}

Other Examples

This Summer Will be Awesome

Fashion

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Info from "components/Typography/Info.js";

import imagesStyles from "styles/jss/nextjs-material-kit-pro/imagesStyles.js";
import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

import { cardTitle } from "styles/jss/nextjs-material-kit-pro.js";

const style = {
  ...imagesStyles,
  ...cardsStyle,
  cardTitle
};

const useStyles = makeStyles(style);

export default function CardExampleCardBlog() {
  const classes = useStyles();
  return (
    <Card blog>
      <CardHeader image>
        <a href="#pablo">
          <img
            className={classes.imgCard}
            src="https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
            alt=""
          />
          <div className={classes.imgCardOverlay}>
            <h4
              className={classes.cardTitle}
              style={{
                color: "white",
                position: "absolute",
                bottom: "10px",
                left: "15px"
              }}
            >
              This Summer Will be Awesome
            </h4>
          </div>
        </a>
      </CardHeader>
      <CardBody>
        <Info>
          <h6 className={classes.cardCategory}>Fashion</h6>
        </Info>
        <p>
          Don't be scared of the truth because we need to restart the human
          foundation in truth And I love you like Kanye loves Kanye I love Rick
          Owens’ bed design but the back is...
        </p>
      </CardBody>
    </Card>
  );
}

Twitter

"You Don't Have to Sacrifice Joy to Build a Fabulous Business and Life"

...Tania Andrew
2.4K ·45
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
import Favorite from "@material-ui/icons/Favorite";
import Share from "@material-ui/icons/Share";
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardColorInfo() {
  const classes = useStyles();
  return (
    <Card color="info">
      <CardBody color>
        <h5 className={classes.cardCategorySocialWhite}>
          <i className="fab fa-twitter" />
          Twitter
        </h5>
        <h4 className={classes.cardTitleWhite}>
          <a href="#pablo" onClick={e => e.preventDefault()}>
            "You Don't Have to Sacrifice Joy to Build a Fabulous Business and
            Life"
          </a>
        </h4>
      </CardBody>
      <CardFooter>
        <div className={classes.authorWhite}>
          <a href="#pablo" onClick={e => e.preventDefault()}>
            <img
              src="/img/faces/avatar.jpg"
              alt="..."
              className={`${classes.imgRaised} ${classes.avatar}`}
            />
            <span>Tania Andrew</span>
          </a>
        </div>
        <div className={`${classes.statsWhite} ${classes.mlAuto}`}>
          <Favorite />
          2.4K ·
          <Share />
          45
        </div>
      </CardFooter>
    </Card>
  );
}

TRENDING

To Grow Your Business Start Focusing on Your Employees

...Lord Alex
345 ·45
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
import Favorite from "@material-ui/icons/Favorite";
import ChatBubble from "@material-ui/icons/ChatBubble";
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import Danger from "components/Typography/Danger.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardTrending() {
  const classes = useStyles();
  return (
    <Card>
      <CardBody>
        <Danger>
          <h6 className={classes.cardCategory}>TRENDING</h6>
        </Danger>
        <h4 className={classes.cardTitle}>
          <a href="#pablo" onClick={e => e.preventDefault()}>
            To Grow Your Business Start Focusing on Your Employees
          </a>
        </h4>
      </CardBody>
      <CardFooter>
        <div className={classes.author}>
          <a href="#pablo" onClick={e => e.preventDefault()}>
            <img
              src="/img/faces/christian.jpg"
              alt="..."
              className={`${classes.imgRaised} ${classes.avatar}`}
            />
            <span>Lord Alex</span>
          </a>
        </div>
        <div className={`${classes.stats} ${classes.mlAuto}`}>
          <Favorite />
          345 ·
          <ChatBubble />
          45
        </div>
      </CardFooter>
    </Card>
  );
}

...

Alec Thompson

CEO / CO-FOUNDER
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardProfile() {
  const classes = useStyles();
  return (
    <Card profile style={{ maxWidth: "360px" }}>
      <CardHeader image>
        <a href="#pablo" onClick={e => e.preventDefault()}>
          <img
            src="https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
            alt="..."
          />
        </a>
        <div
          className={classes.coloredShadow}
          style={{
            backgroundImage: `url(https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)`,
            opacity: "1"
          }}
        />
      </CardHeader>
      <CardBody>
        <h4 className={classes.cardTitle}>Alec Thompson</h4>
        <h6 className={`${classes.cardCategory} ${classes.cardDescription}`}>
          CEO / CO-FOUNDER
        </h6>
      </CardBody>
      <CardFooter profile className={classes.justifyContentCenter}>
        <Button justIcon round color="twitter">
          <i className="fab fa-twitter" />
        </Button>
        <Button justIcon round color="facebook">
          <i className="fab fa-facebook" />
        </Button>
        <Button justIcon round color="google">
          <i className="fab fa-google" />
        </Button>
      </CardFooter>
    </Card>
  );
}

Full Background Card

PRODUCTIVITY APPS

The Best Productivity Apps on Market

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
import Subject from "@material-ui/icons/Subject";
import WatchLater from "@material-ui/icons/WatchLater";
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardBackground() {
  const classes = useStyles();
  return (
    <Card
      background
      style={{
        backgroundImage: `url(https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)`
      }}
    >
      <CardBody background>
        <h6 className={classes.cardCategoryWhite}>PRODUCTIVITY APPS</h6>
        <a href="#pablo" onClick={e => e.preventDefault()}>
          <h3 className={classes.cardTitleWhite}>
            The Best Productivity Apps on Market
          </h3>
        </a>
        <p className={classes.cardDescriptionWhite}>
          Don't be scared of the truth because we need to restart the human
          foundation in truth And I love you like Kanye loves Kanye I love Rick
          Owens’ bed design but the back is...
        </p>
        <Button simple color="white">
          <Subject /> Read Article
        </Button>
        <Button simple color="white">
          <WatchLater /> Watch Later
        </Button>
      </CardBody>
    </Card>
  );
}

Pricing Card

$69

This is good if your company size is between 11 and 99 Persons.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui icons
import Business from "@material-ui/icons/Business";
// core components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardPricing() {
  const classes = useStyles();
  return (
    <Card pricing color="primary" style={{ maxWidth: "235px" }}>
      <CardBody pricing>
        <div className={`${classes.iconWrapper} ${classes.iconWrapperColor}`}>
          <Business className={classes.iconWhite} />
        </div>
        <h3 className={`${classes.cardTitleWhite} ${classes.marginTop30}`}>
          $69
        </h3>
        <p className={classes.cardDescriptionWhite}>
          This is good if your company size is between 11 and 99 Persons.
        </p>
        <Button round color="white">
          Choose plan
        </Button>
      </CardBody>
    </Card>
  );
}

Rotating Card

Full Background Card

This Background Card Will Rotate on Hover

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

Manage Post

As an Admin, you have shortcuts to edit, view or delete the posts.




import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";
// @material-ui icons
import Subject from "@material-ui/icons/Subject";
import Delete from "@material-ui/icons/Delete";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";

import cardsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/sectionCards.js";

const style = {
  ...cardsStyle
};

const useStyles = makeStyles(style);

export default function CardExampleCardRotating() {
  React.useEffect(() => {
    addStylesForRotatingCards();
    return function cleanup() {};
  });
  const addStylesForRotatingCards = () => {
    var rotatingCards = document.getElementsByClassName(classes.cardRotate);
    for (let i = 0; i < rotatingCards.length; i++) {
      var rotatingCard = rotatingCards[i];
      var cardFront = rotatingCard.getElementsByClassName(classes.front)[0];
      var cardBack = rotatingCard.getElementsByClassName(classes.back)[0];
      cardFront.style.height = "unset";
      cardFront.style.width = "unset";
      cardBack.style.height = "unset";
      cardBack.style.width = "unset";
      var rotatingWrapper = rotatingCard.parentElement;
      var cardWidth = rotatingCard.parentElement.offsetWidth;
      var cardHeight = rotatingCard.children[0].children[0].offsetHeight;
      rotatingWrapper.style.height = cardHeight + "px";
      rotatingWrapper.style["margin-bottom"] = 30 + "px";
      cardFront.style.height = "unset";
      cardFront.style.width = "unset";
      cardBack.style.height = "unset";
      cardBack.style.width = "unset";
      cardFront.style.height = cardHeight + 35 + "px";
      cardFront.style.width = cardWidth + "px";
      cardBack.style.height = cardHeight + 35 + "px";
      cardBack.style.width = cardWidth + "px";
    }
  };
  const classes = useStyles();
  return (
    <GridContainer>
      <GridItem xs={12} sm={12} md={8} lg={6}>
        <div className={classes.rotatingCardContainer}>
          <Card background className={classes.cardRotate}>
            <div
              className={`${classes.front} ${classes.wrapperBackground}`}
              style={{
                backgroundImage: "url('/img/examples/card-blog5.jpg')"
              }}
            >
              <CardBody background className={classes.cardBodyRotate}>
                <h6 className={classes.cardCategoryWhite}>
                  Full Background Card
                </h6>
                <a href="#pablo" onClick={e => e.preventDefault()}>
                  <h3 className={classes.cardTitleWhite}>
                    This Background Card Will Rotate on Hover
                  </h3>
                </a>
                <p className={classes.cardDescriptionWhite}>
                  Don't be scared of the truth because we need to restart the
                  human foundation in truth And I love you like Kanye loves
                  Kanye I love Rick Owens’ bed design but the back is...
                </p>
              </CardBody>
            </div>
            <div
              className={`${classes.back} ${classes.wrapperBackground}`}
              style={{
                backgroundImage: "url('/img/examples/card-blog5.jpg')"
              }}
            >
              <CardBody background className={classes.cardBodyRotate}>
                <h5 className={classes.cardTitleWhite}>Manage Post</h5>
                <p className={classes.cardDescriptionWhite}>
                  As an Admin, you have shortcuts to edit, view or delete the
                  posts.
                </p>
                <div className={classes.textCenter}>
                  <Button round justIcon color="info">
                    <Subject />
                  </Button>
                  <Button round justIcon color="success">
                    <Icon>mode_edit</Icon>
                  </Button>
                  <Button round justIcon color="danger">
                    <Delete />
                  </Button>
                </div>
              </CardBody>
            </div>
          </Card>
        </div>
      </GridItem>
    </GridContainer>
  );
}

Props

Card.propTypes = {
  className: PropTypes.string,
  plain: PropTypes.bool,
  profile: PropTypes.bool,
  blog: PropTypes.bool,
  raised: PropTypes.bool,
  background: PropTypes.bool,
  pricing: PropTypes.bool,
  testimonial: PropTypes.bool,
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose"
  ]),
  product: PropTypes.bool
};

CardAvatar.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  profile: PropTypes.bool,
  plain: PropTypes.bool,
  testimonial: PropTypes.bool,
  testimonialFooter: PropTypes.bool
};

CardBody.propTypes = {
  className: PropTypes.string,
  background: PropTypes.bool,
  plain: PropTypes.bool,
  formHorizontal: PropTypes.bool,
  pricing: PropTypes.bool,
  signup: PropTypes.bool,
  color: PropTypes.bool
};

CardFooter.propTypes = {
  className: PropTypes.string,
  plain: PropTypes.bool,
  profile: PropTypes.bool,
  pricing: PropTypes.bool,
  testimonial: PropTypes.bool
};

CardHeader.propTypes = {
  className: PropTypes.string,
  color: PropTypes.oneOf([
    "warning",
    "success",
    "danger",
    "info",
    "primary",
    "rose"
  ]),
  plain: PropTypes.bool,
  image: PropTypes.bool,
  contact: PropTypes.bool,
  signup: PropTypes.bool,
  noShadow: PropTypes.bool
};