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.

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. Each row uses a 12-column grid by default, but the amount of columns in the grid can be set in the right pane.

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.

Nesting boxes

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 resort 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 elements on your page. With nothing selected, 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.

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 single, elements in a Box to add more visual styles.

Hiding elements

Elements directly inside a box can be hidden or displayed while within different device modes. In the right pane 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.

Did this answer your question?