Design Tokens for Mesh have just been released!
Skip to content

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.

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

Props

PropTypeDefaultDescription
children (required)nodeThe contents of the Column.
widthstring or objectThe 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.
hiddenAbovestringA breakpoint value which defines the maximum screen width the Column will be visible. The value will be passed down to the underlying Hidden component.
hiddenBelowstringA breakpoint value which defines the minimum screen width the Column will be visible. The value will be passed down to the underlying Hidden component.
flexbooleanfalseApply 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.