Getting started
• Tutorial
• Styles
• Build Tools
Components
• Badges
• Buttons
• Cards
• Checkbox Radio Switch
• Clearfix
• Dropdown
• Footer
• Grid
• Icons
• InfoAreas
• Inputs
• Linear Progress
• Modals
• Navigation
• NavPills
• Notifications
• Pagination
• Parallax
• Popovers
• Tabs
• Tooltips
• Typography
Plugins
• Carousel
• Date Picker
• Sliders

Cards

Styles

You will find the styles for these components in
src/assets/jss/nextjs-material-kit/components/cardStyle.js
src/assets/jss/nextjs-material-kit/components/cardHeaderStyle.js
src/assets/jss/nextjs-material-kit/components/cardBodyStyle.js
src/assets/jss/nextjs-material-kit/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 title

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

Do something

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// 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/imagesStyles.js";

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

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

const useStyles = makeStyles(styles);

export default function Cards() {
  const classes = useStyles();
  return (
    <Card style={{width: "20rem"}}>
      <img
        style={{height: "180px", width: "100%", display: "block"}}
        className={classes.imgCardTop}
        src="..."
        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.

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

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// 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.js";

const styles = {
  ...imagesStyles,
  cardTitle,
  cardLink,
  cardSubtitle
};

const useStyles = makeStyles(styles);

export default function Cards() {
  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>
  );
}

Header and Footer

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// 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.js";

const styles = {
  cardTitle,
};

const useStyles = makeStyles(styles);

export default function Cards() {
  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>
  );
}

import React from "react";
// 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 Cards() {
  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>
  );
}

export default Cards;

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// 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.js";

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

const useStyles = makeStyles(styles);

export default function Cards() {
  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

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// 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.js";

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

const useStyles = makeStyles(styles);

export default function Cards() {
  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 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

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

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

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

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

const useStyles = makeStyles(styles);

export default function Cards() {
  const classes = useStyles();
  return(
    <div>
      <Card>
        <img className={classes.imgCardTop} src="..." 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="..." alt="Card-img-cap" />
      </Card>
    </div>
  );
};

Image overlays

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 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 components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Card from "/components/Card/Card.js";

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

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

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

const useStyles = makeStyles(styles);

export default function Cards() {
  const classes = useStyles();
  return(
    <Card>
      <img className={classes.imgCard} src="..." alt="Card-img" />
      <div className={classes.imgCardOverlay}>
        <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>Last updated 3 mins ago</p>
      </div>
    </Card>
  );
}

Props

Card.propTypes = {
  className: PropTypes.string,
  plain: PropTypes.bool,
  carousel: PropTypes.bool
};

CardBody.propTypes = {
  className: PropTypes.string
};

CardFooter.propTypes = {
  className: PropTypes.string
};

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