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
bool
rounded
bool
padded
bool
border
bool
children
node
elevation
number
hoverElevation
number
className
union
opaque
bool
wireframe
bool
onClick
func
component
union

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>