Skip to main content
Layout component reference

A basic overview of layout components one can use to format web pages.

Updated over 7 months ago

Using the Page builder menu, you can design and then build web pages for your application. The page name (A) indicates the current page on which you are working. The Components menu contains an extensive array of components that can be used for building web pages.

Layout components

The initial steps involve creating a layout or format. A series of layout options varying from a single column layout to a multi-column and multi-row layouts are available.

You can drag and drop the individual layout components to the canvas.

Once you have added a layout component, you can add additional components. For example, you can scroll to the Content components to add, for example, a Title component.

Before continuing, you may find some useful information about the layout components in this video:

In the below example, the column layout is dragged onto the empty canvas. The component is then displayed in the top area of the canvas as a Column. When you click on the component, the Options menu is displayed. As shown when you scroll through the menu, there are a variety of options available for customizing the component. For example, you can specify the background color and alignment of the column.

Adding column to the canvas

You can drag and drop the additional components to the selected layout to create the required format for your page. When you select a component, you can use the tab buttons displayed as follows:

Select parent component

You can use the Select parent component button to navigate to the parent component in which the current component is nested.

You can then apply options as required to the parent component.

Delete component

You can use the Clone component button to replicate a component that you want to reuse. You can apply consistent formats and layouts across your web page based on the original component.

Where you decide that you do not require a component, you can use the Trash icon when the component is selected to delete the component.

The following components are available in the Layout section of the Page builder menu:

Columns

Columns

Columns are layout type components that are used to create sections in the grid of your page. This is based on the MaterialUI framework (12 sections principle).

You can use the different column components for creating an initial wireframe for your web page.

Container

Container

Use the container layout as an anchor for other components that you want to use such as lists or buttons.

Box

Box component

Boxes are layout type components that are used to create empty containers for your page.

Grid

Grid component

You can create a grid for organizing the layout for your web page.

Paper

Paper component

Papers are slightly altered columns with a border effect to give it a ‘paper’ look, elevating or outlining the component.

Panel

Panel component

Panels are slightly altered columns with a styled border added to it. On panels, however, you’re able to add a title to its header.

Expansion Panel

Expansion panel component

An expansion panel is a panel that can be expanded to show the contents within, displaying them in a dropdown manner.

Drawer

Drawer component

A drawer is a sidebar containing elements such as menu items.

Drawer Container

Drawer container component

A drawer container is the container part of the drawer component.

Drawer Sidebar

Drawer sidebar component

A drawer sidebar is the sidebar part of the drawer component.

You can use the options available for setting, for example, the width or height of a component, or to set the padding or background color.

Did this answer your question?