Columns
Columns manages the underlying Column components. It is used to create a horizontal layout for structuring information on a page, whereas the Column components will maintain the vertical structure inside.
Installation
bash
npm install @nib/layout
Usage
jsx
import {Columns} from '@nib/layout';
Do not style layout components
You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.
Interactive demo
jsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | node | The children of the columns layout. Must be Column components. | |
space | number or object | 0 | A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10. |
collapseBelow | string | A breakpoint value which defines when the horizontal columns structure should collapse to a vertical stack. | |
align | string or object | left | Horizontally align the columns children. Can be made responsive by passing in an object of breakpoints. Must be one of left, center, or right. |
verticalAlign | string | stretch | Vertically align the columns children. Can be made responsive by passing in an object of breakpoints. Must be one of top, center, bottom, or stretch. |
reverse | boolean or object | false | Reverse the order of the columns children. Can be made responsive by passing an object of breakpoints. Below collapseBelow breakpoints, this doesn't have any effect |
wrap | boolean or object | false | Wrap the columns children when they do not fit. Can be made responsive by passing an object of breakpoints. Only useful when column widths total less than 100%. |
Reverse Props warning
Reverse props below the collapseBelow breakpoints, have no effect.