Column Container
Display your blocks side by side
Overview
This Block Container lets you arrange blocks side by side in columns, creating flexible and visually appealing layouts. It's ideal for dashboards, account details, and other structured content, helping you organize related information more effectively within a single container.
1. How to add a block container
You can find Block containers in the Block Panel and add it to any page on your application.
2. Select layout
You can choose from several predefined column layouts within the Block Container. These options include:
- Two Columns
- Three Columns
- Four Columns
- 1:2 Layout (one-third width and two-thirds width)
- 2:1 Layout (two-thirds width and one-third width)
- 1:3 Layout (one-fourth width and three-fourths width)
- 3:1 Layout (three-fourths width and one-fourth width)
- 1:2:1 Layout (one-third, one-third, one-third)
You can easily switch between these layouts after selecting one.
3. Add blocks to the container
After selecting a layout, you can add blocks to the individual container's columns. Not all block types are available for use in these layouts.
Currently supported blocks include:
- Charts
- Summary Cards
- List (New)
- Grid (New)
- Item Detail (New)
- Comments
- Maps
- Static Blocks (Simple Image, Simple Text, CTA)
Form, Calendar, and Table blocks will be supported in future updates.
4. Customize block container
You can customize the appearance and behavior of the Column Block Container with the following options:
- Title and Subtitle: Set a title and subtitle for the container.
- Layout: Change column layout
- Block Alignment: Adjust the alignment of blocks within the container.
- Background Color: Choose a custom background color for the container.
- Padding: Adjust padding around the blocks within the container.
- Border Style: Customize the border style of the container.
- Visibility: Set visibility options for the container.
Please note that visibility settings apply to all blocks within the container; individual block visibility is not supported.
5. Move blocks in/out of the container
Easily move blocks in or out of the container using an action button on the canvas without losing your existing settings.
Only supported blocks of the latest versions can be moved into the container.
