Paper

Paper can be used to build surface or other elements for your application.

The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. Paper is the root component for a variety of other components, including Cards, Drawers, and Lists. Please use the most appropriate component for your needs.

Standalone

<Grid container justify="center">
  <Grid item xs={12}>
    <Paper padding={3} margin={2}>
      <Typography variant="h5" component="h3" gutterBottom>
        This is a sheet of paper.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={12}>
    <Paper padding={3} margin={2}>
      <Typography variant="h5" component="h3" gutterBottom>
        This is a sheet of paper.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

Variations

Square corners with square.

<Grid container justify="center">
  <Grid item xs={12}>
    <Paper padding={3} margin={2} square>
      <Typography variant="h5" component="h3" gutterBottom>
        Hip to be a square.      
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={12}>
    <Paper padding={3} margin={2} square>
      <Typography variant="h5" component="h3" gutterBottom>
        Hip to be a square.      
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

Remove or increase shadow depth with the use of elevation. Values range from 0 to 24.

<Grid container justify="center" spacing={2}>
  <Grid item xs={6}>
    <Paper padding={3} margin={2} elevation={0}>
      <Typography variant="h5" component="h3" gutterBottom>
        Flat.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={3} margin={2} elevation={24}>
      <Typography variant="h5" component="h3" gutterBottom>
        Ultra raised.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

<Grid container justify="center" spacing={2}>
  <Grid item xs={6}>
    <Paper padding={3} margin={2} elevation={0}>
      <Typography variant="h5" component="h3" gutterBottom>
        Flat.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={3} margin={2} elevation={24}>
      <Typography variant="h5" component="h3" gutterBottom>
        Ultra raised.
      </Typography>
      <Typography color="textSecondary">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </Grid>
</Grid>

Paper

Standalone

Variations

Properties

<Paper />