Skip to content
Stable

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

PropTypeDefaultDescription
children (required)nodeThe children of the columns layout. Must be Column components.
spacenumber or object0A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
collapseBelowstringA breakpoint value which defines when the horizontal columns structure should collapse to a vertical stack.
alignstring or objectleftHorizontally align the columns children. Can be made responsive by passing in an object of breakpoints. Must be one of left, center, or right.
verticalAlignstringstretchVertically align the columns children. Can be made responsive by passing in an object of breakpoints. Must be one of top, center, bottom, or stretch.
reverseboolean or objectfalseReverse 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

Reverse Props warning

Reverse props below the collapseBelow breakpoints, have no effect.