ContentColumn
Notes
A utility for creating content in consistent column widths. It has four presets: sm, md, lg and xl (defaults to xl).
"sm" creates a column that is as wide as a common phone, at any breakpoint.
"md" is progressively wider.
"lg", restricts width to the columnWidthLarge variable (suitable for reading text).
"xl" restricts width to the columnWidthXLarge variable; both of these are intended
to be used in non-Crate layouts.
ContentColumn has no predefined top and bottom padding, but these may be added 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.
ContentColumn uses by default a box sizing model of content-box.
The inner children container uses by default the border-box box sizing model,
but may be overridden with the innerClassName.
note: sizes 'narrow' and 'max' are deprecated in favor of 'sm' and 'xl' respectively, but included temporarily for backward compatibility.
Props
- children
node* - className
string[''] - innerClassName
string[''] - size
oneOf('sm', 'md', 'lg', 'xl', 'narrow', 'medium', 'max')['xl']