Container

A centered, max-width content column with consistent horizontal gutters.

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

sm — 640px max-width

md — 960px max-width (default)

lg — 1280px max-width

fluid — full width with gutters

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-container" data-size="md">Page content</div>

Classes

Class
`.corn-container`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg\|fluid`

Vanilla JS

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

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

Options

Option	Type	Default
`size`	`'sm'\|'md'\|'lg'\|'fluid'`	`'md'`

React

Container — from @corndev/ui-react.

Props

Prop	Type	Default
`size`	`'sm'\|'md'\|'lg'\|'fluid'`	`'md'`
`as`	`React.ElementType`	`'div'`
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

Sizes

Container has four width presets. The coloured background shows the container boundary.