Box

A Box is a container for other components. Boxes are used to define the layout and structure of your pages.

Creating a layout inside of a Box

When you first drop a Box onto your page, it will appear as an empty rectangle. After adding a component into a Box, you can place new components side-by-side or above and below that first component. Components placed side-by-side create columns, and ones placed above and below create new rows.

Boxes can also be nested inside of each other. When creating a multi-column layout, where each column has multiple elements, you'll most likely want to wrap each column in a Box. This way you can sort columns easily and keep all the elements together when creating breakpoints for mobile devices.

Using breadcrumbs

Breadcrumbs allow you to select and move difficult to reach boxes on your page. Breadcrumbs appear at the top left of a highlighted element. You can expand the breadcrumbs by hovering over the element name. From here you can either click to select or drag to move any element in the breadcrumbs.

Changing column layout

Selecting a Box with multiple elements will display the grid layout. The handles between each element can be dragged left or right to adjust the column layout in that row.

Setting responsive breakpoints

Select a Box containing multiple elements in a single row. Vertical dashed lines appear in between each element. Click anywhere on a vertical dashed line to split the row.

A horizontal dashed line will now be between the two rows. Clicking the horizontal line will join the adjacent rows back into a single row. Different breakpoints can be set on different device modes.

Adding backgrounds and borders

Boxes are one of the only components that allow you to add certain styles such as backgrounds, borders, rounded corners, and shadows. You can wrap multiple, or even just a single element in a Box to add more visual styles.

Box height

By default, the height of a Box is set to be driven by its content. A second option found in the "Height" panel will automatically stretch the height of a Box to match the tallest element or Box found in the same row.

Vertical alignment

A Box's content can be vertically aligned using the "Align items" panel in the sidebar. By default, all content will align at the top of the Box. Content can also be aligned in the middle or anchored to the bottom. A fourth option lets you space the Box's content apart at equal distances. Note, this only has an effect if the Box height is set to stretch.

Hiding elements

Elements directly inside a Box can be hidden or displayed while within different device modes. In the styles sidebar of a selected Box, you'll see the Visibility panel that shows a direct representation of the elements inside the Box. To hide or display an element, click on the rectangle in the panel that matches the element inside the page.