Box
A general-purpose layout primitive for applying token-based padding, background, border, and border-radius without writing custom CSS.
import { ... } from '@corndev/ui' padding sm + secondary background
padding md + border + radius md
padding lg + border + radius lg
paddingX xl, paddingY sm
HTML
No JavaScript required — these classes are the whole component.
<div class="corn-box" data-padding="md" data-background="secondary" data-radius="md">Content</div>Classes
| Class |
|---|
.corn-box |
Attributes
| Attribute | Values |
|---|---|
data-padding | xs|sm|md|lg|xl |
data-padding-x | xs|sm|md|lg|xl |
data-padding-y | xs|sm|md|lg|xl |
data-background | primary|secondary|tertiary |
data-border | present or absent |
data-radius | sm|md|lg |
Vanilla JS
Optional. createBox 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 { createBox } from '@corndev/ui';
import '@corndev/ui/theme';
const el = document.querySelector('#target');
const instance = createBox(el, { /* options */ });Options
| Option | Type | Default | Description |
|---|---|---|---|
padding | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | 'none' | |
paddingX | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | undefined | Overrides horizontal padding |
paddingY | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | undefined | Overrides vertical padding |
background | 'primary'|'secondary'|'tertiary'|'none' | 'none' | |
border | boolean | false | |
radius | 'sm'|'md'|'lg'|'none' | 'none' |
React
Box — from @corndev/ui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
padding | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | 'none' | |
paddingX | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | undefined | Overrides horizontal padding |
paddingY | 'xs'|'sm'|'md'|'lg'|'xl'|'none' | undefined | Overrides vertical padding |
background | 'primary'|'secondary'|'tertiary'|'none' | 'none' | |
border | boolean | false | |
radius | 'sm'|'md'|'lg'|'none' | 'none' | |
as | React.ElementType | 'div' | |
children | React.ReactNode | undefined | |
className | string | undefined |
Padding
padding xs
padding sm
padding md
padding lg
padding xl
<Box padding="xs">...</Box>
<Box padding="sm">...</Box>
<Box padding="md">...</Box>
<Box padding="lg">...</Box>
<Box padding="xl">...</Box>Independent X / Y padding
Wide horizontal, tight vertical
<Box paddingX="xl" paddingY="sm">...</Box>Background
primary
secondary
tertiary
<Box background="primary">...</Box>
<Box background="secondary">...</Box>
<Box background="tertiary">...</Box>Border and radius
radius sm
radius md
radius lg
<Box border radius="sm">...</Box>
<Box border radius="md">...</Box>
<Box border radius="lg">...</Box>Polymorphic as prop
Rendered as a <section>
<Box as="section" padding="md" background="secondary">...</Box>
<Box as="article" padding="md">...</Box>