Stable

Column

Column is a layout component to manage elements that are to be displayed in a vertical structure. Column allows you to define the width of these structures. Column components must be placed inside a Columns component.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib/layout

Usage

jsx

import {Column} 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

<Columns space={2}>
  <Column width={{xs: '1/2', lg: 'content'}}>
    <SmallPlaceholder>First column</SmallPlaceholder>
  </Column>
  <Column width="1/2" hiddenAbove="lg">
    <LargePlaceholder>Second column</LargePlaceholder>
  </Column>
</Columns>

<Columns space={2}>
  <Column width={{xs: '1/2', lg: 'content'}}>
    <SmallPlaceholder>First column</SmallPlaceholder>
  </Column>
  <Column width="1/2" hiddenAbove="lg">
    <LargePlaceholder>Second column</LargePlaceholder>
  </Column>
</Columns>

Props

Prop	Type	Default	Description
`children` (required)	node		The contents of the Column.
`width`	string or object		The width of the column within the Columns container. Can be made responsive by passing in an object of breakpoints. Value(s) must be one of `content`, `1/2`, `1/3`, `2/3`, `1/4`, `3/4`, `1/5`, `2/5`, `3/5`, `4/5`, `1`.
`hiddenAbove`	string		A breakpoint value which defines the maximum screen width the Column will be visible. The value will be passed down to the underlying Hidden component.
`hiddenBelow`	string		A breakpoint value which defines the minimum screen width the Column will be visible. The value will be passed down to the underlying Hidden component.
`flex`	boolean	`false`	Apply `display: flex` to the Column. This will help align the direct children of the column allowing the content to grow to fit the largest column height.

Column widths

By default, an empty width value will cause the column to grow to fit the space available within the Columns container.

The content value on the width prop ensures that the width of the column grows to fit the maximum size of the inner content and no further.

The sum of widths of the columns must not exceed 1 in order to keep the children from overflowing the Columns container. For example, if one column has a width of 1/3, the remaining column(s) must not sum to a width greater than 2/3. This is especially important to keep in mind when using responsive column widths.

Column visibility

When modifying the visibility of columns using the hiddenAbove and hiddenBelow props, you must ensure that the remaining columns maintain valid widths. If you are using two columns and one is hidden at a certain breakpoint, the remaining column must have a width of 1 at the same breakpoint.

Columns

Edit this page