Column Container

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)

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)

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.

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.