Paper
A surface container with shadow, padding, and border radius.
import { ... } from '@corndev/ui' No shadow
Small shadow (default)
Medium shadow
Large shadow
Border, no shadow
HTML
No JavaScript required — these classes are the whole component.
<div class="corn-paper" data-padding="md" data-shadow="sm" data-radius="md">Card</div>Classes
| Class |
|---|
.corn-paper |
Attributes
| Attribute | Values |
|---|---|
data-surface | base|raised |
data-shadow | none|sm|md|lg |
data-padding | none|xs|sm|md|lg|xl |
data-radius | none|sm|md|lg |
data-border | present or absent |
Vanilla JS
Optional. createPaper only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.
import { createPaper } from '@corndev/ui';
import '@corndev/ui/theme';
const el = document.querySelector('#target');
const instance = createPaper(el, { /* options */ });Options
| Option | Type | Default | Description |
|---|---|---|---|
shadow | 'none'|'sm'|'md'|'lg' | 'sm' | Elevation. |
padding | 'none'|'xs'|'sm'|'md'|'lg'|'xl' | 'md' | |
radius | 'sm'|'md'|'lg' | 'md' | |
border | boolean | false | Draw a 1px border in addition to the shadow. |
surface | 'base'|'raised' | 'base' | raised sits one step up from the page, so a card reads as a card even where a shadow does not — in a dark theme especially. base is the page’s own background. |
React
Paper — from @corndev/ui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
shadow | 'none'|'sm'|'md'|'lg' | 'sm' | Elevation. |
padding | 'none'|'xs'|'sm'|'md'|'lg'|'xl' | 'md' | |
radius | 'sm'|'md'|'lg' | 'md' | |
border | boolean | false | Draw a 1px border in addition to the shadow. |
surface | 'base'|'raised' | 'base' | raised sits one step up from the page, so a card reads as a card even where a shadow does not — in a dark theme especially. base is the page’s own background. |
as | string|React.ComponentType | 'div' | Element or component to render as. |
className | string | undefined | Merged with the Corn UI classes. |
children | React.ReactNode | undefined |
Default
Content inside a Paper surface.
<Paper>Content inside a Paper surface.</Paper>Shadows
No shadow
Small shadow (default)
Medium shadow
Large shadow
<Paper shadow="none">...</Paper>
<Paper shadow="sm">...</Paper>
<Paper shadow="md">...</Paper>
<Paper shadow="lg">...</Paper>Padding
Extra small padding
Small padding
Medium padding (default)
Large padding
<Paper padding="xs">...</Paper>
<Paper padding="sm">...</Paper>
<Paper padding="md">...</Paper>
<Paper padding="lg">...</Paper>With border
Paper with a border and no shadow.
<Paper border shadow="none">...</Paper>Raised
A Paper on the page’s own background shows only its edge, and in a dark theme,
where shadows barely read, often not even that. surface="raised" puts it one
step up, on --corn-bg-secondary, so a card reads as a card:
<Paper surface="raised" border padding="lg">…</Paper>