Material UI - Designing Media Cards

M
andrewgbliss
7 months ago

This will cover how to create a media card in Material UI that has an image, title, description and share buttons.

. . .

Github repo

https://github.com/EntryLevelDeveloperTraining/material-ui-workshop

Getting Started

First let's create a page called cards.tsx under the pages folder. I will be using NextJs for this tutorial, however you can use any server you want, this article will be using Material UI and React.

The card I am going to make is from the Material UI website:

https://material-ui.com/components/cards/

Create a reusable card component

Under the components folder we will create a folder called Cards, then under that folder we will create a component called MediaCard.tsx.

Here is the contents of that component:

import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

interface Props {
  image: string;
  title: string;
  description: string;
}

export default function MediaCard({ image, title, description }: Props) {
  const classes = useStyles();
  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia className={classes.media} image={image} title={title} />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

So this component is setup using Typescript to take in 3 properties, image, title, and description. The Material UI CardMedia component will take in an image url and title.

The CardContent component will show the title and description. Then the CardActions will show the buttons to Share on SocialMedia and Learn More if you want to link to a blog post.

Using the MediaCard

Let's setup an array that will list out images, titles, and descriptions.

const mediaCards = [
  {
    image: '/img/laptop-coffee.jpeg',
    title: 'Laptop Coffee',
    description:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laborum distinctio veritatis numquam omnis maiores dicta ratione consectetur earum voluptatibus soluta optio quos, labore, iure ea maxime vero reiciendis dolorum.',
  },
  {
    image: '/img/laptop-coffee.jpeg',
    title: 'Laptop Coffee',
    description:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laborum distinctio veritatis numquam omnis maiores dicta ratione consectetur earum voluptatibus soluta optio quos, labore, iure ea maxime vero reiciendis dolorum.',
  },
  {
    image: '/img/laptop-coffee.jpeg',
    title: 'Laptop Coffee',
    description:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laborum distinctio veritatis numquam omnis maiores dicta ratione consectetur earum voluptatibus soluta optio quos, labore, iure ea maxime vero reiciendis dolorum.',
  },
  {
    image: '/img/laptop-coffee.jpeg',
    title: 'Laptop Coffee',
    description:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laborum distinctio veritatis numquam omnis maiores dicta ratione consectetur earum voluptatibus soluta optio quos, labore, iure ea maxime vero reiciendis dolorum.',
  },
];

Now let's create a page that will show a these cards in a grid.

import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import MediaCard from '../components/Cards/MediaCard';
import Layout from '../components/Layout';

// mediaCards Array above

export default function Cards() {
  return (
    <Layout>
      <Box p={5} pt={15} minHeight="100vh">
        <Grid container spacing={5}>
          {mediaCards.map((mediaCard, i) => {
            return (
              <Grid key={i} item>
                <MediaCard {...mediaCard} />
              </Grid>
            );
          })}
        </Grid>
      </Box>
    </Layout>
  );
}

Now we have a container component that will use Material UI Grid and Box that will list out these cards dynamically. You can modify this to suit your needs to pull data from a database, and link to social media or blog posts.

Conclusion

Material UI has some great components we can use to create and design many types of cards. Cards a great way to capture user attention and provide them with an action.


M
andrewgbliss
7 months ago