components
Paper (design)
A Paper exists to group content and present it on a relative depth from where it resides on.
Usage
Use a paper when you want a depth difference between the page and your wrapped component(s). Design wise you can relate this with containers in a design tool e.g. Frames in Figma.
Options
Elevation
Ranging from level -1 to 3, a drop shadow increases the paper's relative depth.
Elevation -1
Elevation 0
Elevation 1
Elevation 2
Elevation 3
Border radius
Every paper can be set with a border radius value from Chameleon Design Tokens. The default value is borderRadius1 which corresponds with 2px.
Border radius 0
Border radius 1
Border radius 4
Hoverable
To indicate to users that a paper has an action or a link bound to it, it can have a hoverable behaviour. This will increase the paper's depth when a user mouses over it.
When a paper is hoverable, the box shadow automatically increases with one level.
This paper is not hoverable
This paper is hoverable