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.