Spacing

Margin and padding utility classes on the spacing tokens.

import { ... } from '@corndev/ui'

corn-px-md corn-py-sm

Padding on the box; the heading drops its top margin and keeps a small bottom one.

HTML

<h2 class="corn-heading corn-mb-sm" data-level="2">Endpoints</h2>
<p class="corn-text corn-mt-0 corn-mb-lg">Every call this API accepts.</p>
<div class="corn-box corn-px-md corn-py-sm">…</div>

Classes

Class	Description
`.corn-m-0`
`.corn-m-xs`
`.corn-m-sm`
`.corn-m-md`
`.corn-m-lg`
`.corn-m-xl`
`.corn-mt-0`
`.corn-mt-xs`
`.corn-mt-sm`
`.corn-mt-md`
`.corn-mt-lg`
`.corn-mt-xl`
`.corn-mb-0`
`.corn-mb-xs`
`.corn-mb-sm`
`.corn-mb-md`	One of 60: `corn-{m\|p}{side}-{step}`. Side is none (all four), `t`/`b` (block start/end), `x` (inline both) or `y` (block both); step is `0` or a spacing token, `xs`–`xl`.
`.corn-mb-lg`
`.corn-mb-xl`
`.corn-mx-0`
`.corn-mx-xs`
`.corn-mx-sm`
`.corn-mx-md`
`.corn-mx-lg`
`.corn-mx-xl`
`.corn-my-0`
`.corn-my-xs`
`.corn-my-sm`
`.corn-my-md`
`.corn-my-lg`
`.corn-my-xl`
`.corn-p-0`
`.corn-p-xs`
`.corn-p-sm`
`.corn-p-md`
`.corn-p-lg`
`.corn-p-xl`
`.corn-pt-0`
`.corn-pt-xs`
`.corn-pt-sm`
`.corn-pt-md`
`.corn-pt-lg`
`.corn-pt-xl`
`.corn-pb-0`
`.corn-pb-xs`
`.corn-pb-sm`
`.corn-pb-md`
`.corn-pb-lg`
`.corn-pb-xl`
`.corn-px-0`
`.corn-px-xs`
`.corn-px-sm`
`.corn-px-md`
`.corn-px-lg`
`.corn-px-xl`
`.corn-py-0`
`.corn-py-xs`
`.corn-py-sm`
`.corn-py-md`
`.corn-py-lg`
`.corn-py-xl`

This component is CSS-only: there is no create* function and no React wrapper.

Classes, not props

Spacing is a class on the element, in plain HTML and in React alike:

<Heading level={2} className="corn-mb-sm">Endpoints</Heading>
<Text className="corn-mt-0 corn-mb-lg">Every call this API accepts.</Text>
<Box className="corn-px-md corn-py-sm">…</Box>

The name is corn-{m|p}{side}-{step}:

Side	Sets
none	all four sides
`t`	block start — the top, in horizontal writing
`b`	block end — the bottom
`x`	both inline sides — left and right
`y`	both block sides — top and bottom

The step is 0, or one of the spacing tokens: xs, sm, md, lg, xl. There is nothing in between on purpose — every value is on the scale — and no responsive variants: this is a small, closed set, not a framework.

Not props

Components take no margin or padding props; spacing is always a class on the element. @corndev/no-foreign-props reports spacing props such as mt or p left on a component.

Why `!important`