Skip to main content
The Container element is one of the most important building blocks for creating well-structured and organized layouts. Its primary purpose is to act as a parent that holds, groups, and arranges any child elements you place inside it, such as text, images, buttons, or even other containers. Mastering the container is key to building everything from simple cards to complex, responsive page sections.

​
How to Add a Container

To add a Container, find the “Container” element in the “Elements” panel on the left and drag it onto your page. You can then drag other elements directly inside the container.

​
Layout Properties (Flexbox - Flex)

The power of the Container comes from its layout properties, which are based on the modern CSS Flexbox model. These settings, found in the right-side panel, control how child elements are positioned and spaced within the container.
These properties control the overall flow of the child elements.Direction Determines the primary axis along which children are arranged.
  • Row (Horizontal): Children are placed side-by-side, from left to right.
  • Column (Vertical): Children are stacked on top of each other, from top to bottom.
Wrap Determines what happens when child elements overflow the container’s space.
  • No Wrap: Children will shrink or overflow and will not move to a new line.
  • Wrap: If there isn’t enough space, children will wrap onto the next line.

​
Dynamic Visibility

Just like other elements, you can show or hide a Container based on certain conditions. This is controlled by the Visibility property found in the Custom section of the right-side panel. Bind this property to any data source that resolves to a boolean (true or false). The container and all elements inside it will be hidden when the value is false.
Example: To show a user’s profile card only after they have logged in, place the card’s elements inside a container and set its Visibility if {{currentUser.status}} is authenticated.

​
Styling the Container

You can fully customize the appearance of the container from the right-side styling panel. Common styling options include:
  • Background: Set a solid color, gradient, or background image.
  • Borders: Control the color, width, and style of the container’s borders.
  • Border Radius: Adjust to create rounded corners.
  • Shadow: Apply a box shadow to make the container appear elevated.
  • Sizing: Set the Width, Height, Min-Width, and other sizing properties.