Balance Logo
Balance
Reckon Design System

Columns

Use the columns primitive to layout content in configurable columns.
Install
pnpm add @reckon-web/columns
Import usage
import {
Columns
} from '@reckon-web/columns';
  • Code
  • API

Alternatives

  • Inline — For horizontal layouts, with fluid child widths that may wrap
  • Flex — For custom layouts

Usage

Each child of Columns represents a single column. By default that column will span 1 fraction of the total number of children.

Edit in Playroom

Gap

The spacing between children can be adjusted using the gap prop.

Vertical alignment

Items of varying height can be vertically aligned using the alignY prop.

Collapse

Provide a breakpoint where the columns should collapse and stack on top of one another.

  • small
  • medium
  • large
  • xlarge

Resize your browser window to see the columns collapse:

Template

Define the relative width of each column. You can create a more traditional grid-style column layout, à la Bootstrap:

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo