Material-UI Cards

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/card-img.js";

const useStyles = makeStyles({
  cardRoot: {
    width: "18rem",
  },
});

const useImgStyles = makeStyles(componentStyles);

export default function MediaCard() {
  const classes = { ...useStyles(), ...useImgStyles() };

  return (
    <Card className={classes.cardRoot}>
      <img
        alt="..."
        src={require("assets/img/theme/img-1-1000x600.jpg").default}
        className={classes.cardImgTop}
      />
      <CardContent>
        <Typography
          variant="h5"
          component={Box}
          marginBottom="1.25rem!important"
        >
          Card Title
        </Typography>
        <Typography variant="body2" component="p">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Typography>
        <Button color="primary" variant="contained">
          Go somewhere
        </Button>
      </CardContent>
    </Card>
  );
}