Paper

A generic wrapping visual component, used to implement the box-shadow and focus/blur animations.

Usage guidelines

  • Paper should always be used to house content, especially when on a non-white background.
  • Use a minimum of 16px padding.
  • If you're building out a list type UI, consider using the Card component.

Props

NameTypeDescription
focused
boolean
rounded
boolean
padded
boolean
border
boolean
children
React.Node
elevation
number
hoverElevation
number
className
string | Object
opaque
boolean
wireframe
boolean
onClick
Function
component
string | React.Node

Paper

A wrapper component in charge of implementing the box-shadow around cards and the focus/blur animations.
this is some demo content
<Paper padding={48}> this is some demo content </Paper>

with elevation

Paper can be visually elevated with a dropshadow.
elevation 1
elevation 2
elevation 3
elevation 4
<span> <Paper elevation={1} padding={48} > elevation 1 </Paper> <Paper elevation={2} padding={48} > elevation 2 </Paper> <Paper elevation={3} padding={48} > elevation 3 </Paper> <Paper elevation={4} padding={48} > elevation 4 </Paper> </span>

With no border-radius

this is some demo content
<Paper padding={48} rounded={false} > this is some demo content </Paper>