Balance Logo
Balance
Reckon Design System

Inline

The inline primitive is used to layout items that wrap within a parent container.
Install
pnpm add @reckon-web/inline
Import usage
import {
Inline
} from '@reckon-web/inline';
  • Code
  • API

Alternatives

  • Columns — For horizontal layouts, with prescriptive and exact child widths
  • Stack — For vertical layouts
  • Flex — For custom layouts

Usage

Use the Inline primitive when you want to layout a group of elements together and allow them to wrap onto a new line.

This is particularly useful when you want the elements to naturally fill the horizontal space available, rather than implementing a specific grid. A good example of this might be a "tag cloud".

Balance
Web
Design
System

Gap

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

Open in Playroom

Vertical alignment

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

top
center
bottom

Horizontal alignment

Items can be aligned horizontally using the align prop.

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