components
Paper (code)
A Paper exists to group content and display it in a relative depth from where it resides on. It's an extension of Box.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| as | FunctionStringNodeObject | 'div' | - | Render with a different HTML tag or a different custom component. |
| borderRadius | 01234567891011'fill''sides' | - | - | Sets the css border-radius property, maps on spacing values + fill, + sides. |
| children | Node | - | - | Contents displayed within the paper. |
| className | String | - | - | Extend classNames. |
| display | 'inline''block''flex''grid''inline-block''inline-flex''inline-grid''inline-table''list-item''run-in''table''table-caption''table-column-group''table-header-group''table-footer-group''table-row-group''table-cell''table-column''table-row''none''initial''inherit' | 'block' | - | Changes the Paper's display property. |
| elevation | -10123 | 1 | - | Elevation value between -1 and 3 |
| hoverable | Boolean | false | - | If set to true, the shadow will interact on hover. |
System Props
bgColor
borderBottomColor, borderBottomStyle, borderBottomWidth, borderColor, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTopColor, borderTopStyle, borderTopWidth, borderWidth
borderRadius
color
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
alignContent, alignItems, flexDirection, flexWrap, justifyContent
height, maxHeight
m, mb, ml, mr, mt, mx, my
p, pb, pl, pr, pt, px, py
position, bottom, left, right, top, zIndex
fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform
width, maxWidth
float
display
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Elevation
default: 1
To increase the paper's relative depth, you can alter the elevation prop.
Hoverable
default: false
To indicate to users that a paper has an action or a link bound to it, you can add a hoverable prop. This will increase the paper's depth when a user mouses over it.
Related components
- Paper extends the Box component, this means every functionality available on Box is applicable on Paper as well.