Paper
The Paper component is a versatile container component used to display content. It can be customized with different background colors, text colors, corners, padding, spacing, shadow, and more.
Components:
Paper
Type
Components
import
import { Paper } from '@pillar-ui/core'
Usage
import { Paper } from '@pillar-ui/core'
<Paper />
Examples
Corner
Default
-
Type
'0' | '1' | '2' | '3' | '4' | '5' | 'full'| 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'b1' | 'b2' | 'b3' | 'b4' | 'b5'
sharp
3
3
md
lg
xl
circle
full
B b 1
b 2
b 3
b 4
b 5
Hand 1
Hand 2
Hand 3
Hand 4
Hand 5
Hand 6
import { Paper } from '@pillar-ui/core'
export const PaperCorner = () => {
return (
<>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="0">
sharp
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="2">
3
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="1">
3
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="3">
md
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="4">
lg
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="5">
xl
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="circle">
circle
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="full">
full
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="b1">
B b 1
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="b2">
b 2
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="b3">
b 3
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="b4">
b 4
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="b5">
b 5
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h1">
Hand 1
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h2">
Hand 2
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h3">
Hand 3
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h4">
Hand 4
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h5">
Hand 5
</Paper>
<Paper className="F-c" p="3" background="B6" width="96px" ratio="1" corner="h6">
Hand 6
</Paper>
</>
)
}
Background
Default
-
Type
The prop accept all supported colors in pillar wih a shade from 1 to 12 ex: B1, P12, Su8, Se9, W4, O12
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
import { Paper } from '@pillar-ui/core'
export const PaperBackground = () => {
return (
<>
<Paper p="3" background="B6">
Hello world
</Paper>
<Paper p="3" background="B9">
Hello world
</Paper>
<Paper p="3" background="B11">
Hello world
</Paper>
<Paper p="3" background="P9">
Hello world
</Paper>
<Paper p="3" background="P6">
Hello world
</Paper>
<Paper p="3" background="P1">
Hello world
</Paper>
<Paper p="3" background="Su9">
Hello world
</Paper>
<Paper p="3" background="Se9">
Hello world
</Paper>
<Paper p="3" background="D9">
Hello world
</Paper>
<Paper p="3" background="W9">
Hello world
</Paper>
<Paper p="3" background="I9">
Hello world
</Paper>
<Paper p="3" background="I8">
Hello world
</Paper>
</>
)
}
Padding
Padding Other Props
The padding props is responsible for adding padding in all directions. You can use the "pt", "pr", "pb", "pl" props to add padding in the top, right, bottom, left directions respectively.Default
-
Type
'0' | '1' | '2' | '3' | '4' | '5' | '6'| '7' | '8' | '9'
9
8
7
6
5
4
3
2
1
import { Paper } from '@pillar-ui/core'
export const PaperPadding = () => {
return (
<>
<Paper border p="9">
9
</Paper>
<Paper border p="8">
8
</Paper>
<Paper border p="7">
7
</Paper>
<Paper border p="6">
6
</Paper>
<Paper border p="5">
5
</Paper>
<Paper border p="4">
4
</Paper>
<Paper border p="3">
3
</Paper>
<Paper border p="2">
2
</Paper>
<Paper border p="1">
1
</Paper>
</>
)
}
Margin
Margin Other Props
The margin props is responsible for adding margin in all directions. You can use the "mt", "mr", "mb", "ml" props to add padding in the top, right, bottom, left directions respectively.Default
-
Type
'0' | '1' | '2' | '3' | '4' | '5' | '6'| '7' | '8' | '9'
1
2
3
4
5
6
7
8
9
import { Flex, Paper } from '@pillar-ui/core'
export const PaperMargin = () => {
return (
<Flex direction="col" gap="4">
<Paper border m="1">
1
</Paper>
<Paper border m="2">
2
</Paper>
<Paper border m="3">
3
</Paper>
<Paper border m="4">
4
</Paper>
<Paper border m="5">
5
</Paper>
<Paper border m="6">
6
</Paper>
<Paper border m="7">
7
</Paper>
<Paper border m="8">
8
</Paper>
<Paper border m="9">
9
</Paper>
</Flex>
)
}
Flow
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
import { Paper } from '@pillar-ui/core'
export const PaperFlow = () => {
return (
<Paper flow="6">
<Paper p="4" flow="1" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="2" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="3" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="4" background="B6">
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="5" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="6" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="7" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="8" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
<Paper p="4" flow="9" background="B6">
<div>Hello world</div>
<div>Hello world</div>
</Paper>
</Paper>
)
}
Shadow
Hello
Hello
Hello
Hello
Hello
import { Paper } from '@pillar-ui/core'
export const PaperShadow = () => {
return (
<>
<Paper corner="4" p="5" background="B6" shadow="1">
Hello
</Paper>
<Paper corner="4" p="5" background="B6" shadow="2">
Hello
</Paper>
<Paper corner="4" p="5" background="B6" shadow="3">
Hello
</Paper>
<Paper corner="4" p="5" background="B6" shadow="4">
Hello
</Paper>
<Paper corner="4" p="5" background="B6" shadow="5">
Hello
</Paper>
</>
)
}
Width
a prop that accepts any valid css width value.
import { Paper } from '@pillar-ui/core'
export const PaperWidth = () => {
return (
<>
<Paper border width="20px" ratio="1" background="B1" />
<Paper border width="100px" ratio="1" background="B1" />
<Paper border width="100%" ratio="1" background="B1" />
<Paper border width="20vw" ratio="1" background="B1" />
<Paper border width="10rem" ratio="1" background="B1" />
</>
)
}
Height
a prop that accepts any valid css height value.
import { Paper } from '@pillar-ui/core'
export const PaperHeight = () => {
return (
<>
<Paper background="B1" border height="24px" ratio="1" />
<Paper background="B1" border height="48px" ratio="1" />
<Paper background="B1" border height="96px" ratio="1" />
<Paper background="B1" border height="192px" ratio="1" />
<Paper background="B1" border height="384px" ratio="1" />
</>
)
}
Ratio
Default
-
Type
'1' | '4-3' | '3-4' | '16-9' | '18-5' | 'golden'
Hello
Hello
Hello
Hello
Hello
Hello
import { Paper } from '@pillar-ui/core'
export function PaperRatio() {
return (
<div className="Sf-4">
<Paper background="B1" width="96px" ratio="1" border>
Hello
</Paper>
<Paper background="B1" width="96px" ratio="16-9" border>
Hello
</Paper>
<Paper background="B1" width="96px" ratio="18-5" border>
Hello
</Paper>
<Paper background="B1" width="96px" ratio="3-4" border>
Hello
</Paper>
<Paper background="B1" width="96px" ratio="4-3" border>
Hello
</Paper>
<Paper background="B1" width="96px" ratio="golden" border>
Hello
</Paper>
</div>
)
}