A utility for creating content in consistent column widths. It has four presets: narrow, medium, wide, max (defaults to max).

"narrow" creates a column that is as wide as a common phone, at any breakpoint. "medium" and "wide" are progressively wider. "max" restricts width to the siteMaxWidth variable; it is intended to be used in non-Crate layouts.

ContentColumn has opinionated top and bottom padding (except for "max"). This can be overridden with a className. It provides consistent gutters in mobile and desktop layouts.

ContentColumn can either wrap an entire section of content, or be stacked together in multiple components that need to have backgrounds or borders that stretch beyond the column.


  • sizeoneOf('narrow', 'medium', 'wide', 'max')['max']

Narrow Content Column

Medium Content Column

Wide Content Column

Max Content Column

Using background and Rules with Content Column