Material-UI Card Examples

Material UI > Material-UI Card Examples

Material UI Card vs Paper

The <Card> component from Material UI is exactly the same as the <Paper> component, there are no differences except you have an option to add a raised prop which simply sets the elevation prop of the Paper to 8. You can also just use elevation itself, or any of the other props found in the Paper component. See our Paper tutorial and examples for more details on Paper.

What is different about the Card component page on Material UI's documentation is that it shows examples for other components in the Card family, as we'll describe below.

These components below are all fairly simple in that they apply certain CSS styles that will help you space out your content in different ways. For example, the <CardContent/> is just a single <div> with some padding. Use it inside your Card or Paper or other component to get some padding for your elements. The <CardActionsArea/> is useful if you want to have styles added for focus, hover or click on the content. If you needed to, for example, have an action on click of the content of an entire Card, you would wrap it around your <CardContent/>.

The <CardActions/> component is another very simple component- just a <div> with display: flex to turn it into a flexbox, align-items: center to vertically align whatever elements you have inside, padding of 8px, and then margin such that there is always 8px between each element.

In no way do you need to use these components inside a Card, you can use them anywhere.

CardContent

Wraps children in a single <div> and applies 16px of padding, and 24px padding-bottom when it is the last child in the group.

CardActionsArea

Wraps children in a single Button, creating a ripple effect when clicked.

CardActions

CardActions is just a flexbox component that wraps the children in 8px of padding and 8px horizontal padding between children.

CardHeader

A complex component with flexbox set as the root component, with an avatar, title, subheader and action.

CardMedia

A single div element that sets background-image properties to cover the available space with an image.

Lesson 6/12

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CardActionsAreaExample from "./CardActionsAreaExample";
import CardActionsExample from "./CardActionsExample";
import CardHeaderExample from "./CardHeaderExample";
import CardContentExample from "./CardContentExample";
import CardMediaExample from "./CardMediaExample";

const theme = createTheme({
  components: {
    MuiCard: {
      styleOverrides: {
        root: { margin: 8, maxWidth: 345 },
      },
    },
  },
});

export default function CardExamples() {
  return (
    <ThemeProvider theme={theme}>
      <CardContentExample />
      <CardActionsAreaExample />
      <CardActionsExample />
      <CardHeaderExample />
      <CardMediaExample />
    </ThemeProvider>
  );
}

Open Sandbox