The Container component acts as a parent inside which you can add child Components. This allows you to style, arrange, and add conditions to groups of Components.
Adding and Setting Up the Container Component
In your Layout Editor of your app, select the tab you want to edit.
Click on the plus (+) symbol in the Components.
Select the Container component.
The Container component allows you to create column layouts and arrange components side-by-side. For example, the app below shows a side-by-side layout using two columns.
When you choose a layout that is more than one column you'll see sections underneath the Container Component with dividers. This shows you the different sections for your container which will change depending on the number of columns you have.
Design
In the General tab on the right side of the Layout Editor, locate the Design section. The Container component allows you to configure the following design options:
Background for your Container: None, Card, Accent, Dark, Highlight, or Image.
Padding: Normal, Large, or XLarge
Width: Large, Medium, or Small
Conditions
Sometimes you want to set the same Visibility Condition on multiple components. Rather than creating the same condition on each individual component, you can group them all into a container and set one condition on that container. For example, in the app below there are two containers. One container is set to be visible if a user is an admin and the other is visible to all users.
