The rebrand is live!
💅 ğŸŽŠ
Read about it here
Skip to content

Layout

Layout components are Mesh components that control spacing between elements. They abstract away the logic and provide a user-friendly and intuitive set of props to achieve accurate and flexible spacing for a number of layout designs.

Box

Box is an extremely powerful component. It is a low-level primitive component that accepts props for standard spacing, background and text colors, display properties and more. It will negate the need to create many custom styled components in your applications.

Stack

Stack controls the vertical white space between elements. Stacks allow you to apply a standard spacing size between direct children. Spacing can be responsive and stacks can be nested.

Inline

Inline controls the horizontal white space between elements. Inline allows you to apply standard spacing between direct children and define the alignment of these children.

Column

Column manages 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.

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.

Hidden

Hidden is a component to manage the responsive visibility of elements. This is very useful when creating accessible experiences for users.

Tiles

Tiles is used to render a grid of components with equal spacing. The number of columns can be responsively set and tiles will automatically wrap to new lines.

Container

Container is designed to limit pages and their content to a maximum width of 1200px. On screen sizes above this, the Container will be horizontally centered.

Section

Section creates a section of a page, with standardised, responsive padding across screen sizes and a nested Container component. A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind.

Split Section

Split Section is used to split the full screen width into two equal columns, whilst maintaining the standard container width for the content. It allows background colours to be applied to each side, to the edge of the screen, without affecting the positioning of the content.