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

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

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>
  )
}