Space

Deliberate empty space.

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

Above a large gap.

Below it.

HTML

No JavaScript required — these classes are the whole component.

<span class="corn-space" data-size="md" data-axis="y" aria-hidden="true"></span>

Classes

Class
`.corn-space`

Attributes

Attribute	Values
`data-size`	`xs\|sm\|md\|lg\|xl`
`data-axis`	`x`

Vanilla JS

Optional. createSpace 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 { createSpace } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSpace(el, { /* options */ });

Options

Option	Type	Default	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`	How much space.
`axis`	`'x'\|'y'`	`'y'`	Which direction it takes up.

React

Space — from @corndev/ui-react.

The props are the same as the options above, plus className.

Reach for gap on the parent first. This is for the case where one gap in a sequence differs from the rest, and adding a modifier to the parent would be worse than saying so in place.

import { Space } from '@corndev/ui-react';
import '@corndev/ui/theme';

<Stack gap="sm">
  <Field label="Name" />
  <Field label="Email" />
  <Space size="lg" />
  <Field label="Notes" />
</Stack>

It carries aria-hidden, because it is empty by definition and announcing it would be announcing nothing.

axis="x" takes up horizontal space on the same scale.

Vanilla

<span class="corn-space" data-size="lg" data-axis="y" aria-hidden="true"></span>