Overview

The Layouts component is a powerful tool designed to organize and differentiate content effectively on the screen while optimizing space utilization. It includes features like a section divider to visually separate different segments for better clarity and flow. Additionally, it offers two-column and three-column layouts, enabling users to arrange content side by side or in three distinct sections, making it ideal for comparisons, feature showcases, or grouped information. Adding details is simple—click the addition icon (+) on any cell within the layout to populate it with text, images, or other elements. This functionality allows for a clean, structured, and visually appealing presentation of information, enhancing both usability and aesthetics.

There are three options in the Layout Component:

• Divider:

  • Use this feature to create a clear separation between different sections of your content.

  • It helps in visually segmenting your page for better readability and organization.

• ​Two Columns:

  • Splits the layout into two equal parts, enabling side-by-side content placement.

  • Ideal for displaying comparisons, images alongside descriptions, or other paired elements.

• ​​Three Columns:

  • Divides the space into three equal parts for multi-element layouts.

  • Useful for showcasing lists, features, or grouping related details in a single row.

​

​

Divider

The Divider is a UI component used in forms or interfaces to visually separate sections or elements. It provides a horizontal or vertical line that creates a clear distinction between content areas, enhancing readability and organization.

​​

Example of Visibility Condition for a Divider 

1. Based on User Role: 

   • A divider is visible only if the user is an "Admin." 

   • Example: In a dashboard, a divider separates "Admin Tools" from other sections, but it only appears for users with the "Admin" role. 

2. Based on Data Value: 

   • A divider is shown only if the "Order Status" is set to "Pending." 

   • Example: On an order summary page, a divider separates the "Pending Actions" section from completed tasks, but it only shows when there are pending orders. 

​

Two Columns

The Two-columns layout is a design configuration that divides the form or UI into two vertical sections, often used for balancing content while maintaining simplicity. It helps to efficiently present fields or components in a side-by-side layout, improving form readability and flow. 

​

​

Gap: This refers to the distance or spacing between two or more columns, rows, or elements. It is a way to control the visual separation between components for better organization, readability, and aesthetics. 

​

Three Columns 

The Three Columns layout is a design configuration in forms or interfaces that splits the available space into three equal or proportionate vertical sections. It helps to present the multiple input fields or content items side-by-side, maximizing screen space and reducing vertical scrolling.

​

​

Customization Options For Two Columns and Three Columns

• Width Adjustment: Columns can have equal or custom widths based on the content. 

• Content Alignment: Align fields or components within columns (left, center, right).