The Layout Row Component is the structural foundation of your page layouts. It allows you to divide a page into columns, then place any combination of components inside those columns to create flexible, responsive designs.
Think of a Layout Row as a container that organizes and displays your content.
The Layout Row Component is ideal for:
Whenever you need more than a single vertical column of content, a Layout Row provides the flexibility to build it.
Configure the appearance of the entire row.
Apply a background color behind every column in the row.
This creates visual separation between sections while reinforcing your brand's color palette.
Define the default text color for components contained within the row.
Individual components can still override this setting when needed.
Choose whether the row spans the full width of the browser or remains within the page's content area.
Full-width rows are ideal for:
Contained rows work well for standard page content.
Each Layout Row can contain one or more columns.
Every column has its own width and optional styling, allowing you to build layouts that range from simple to highly customized.
Common layouts include:
Choose the layout that best supports your content.
Each column can inherit the row's styling or define its own appearance.
Available options include:
This makes it easy to highlight specific content or create alternating sections within the same row.
Columns can contain any supported component.
For example:
Because Layout Rows can contain other Layout Rows, you can build sophisticated page structures while maintaining a consistent editing experience.
Columns can be reordered using drag-and-drop.
Rearranging columns makes it easy to experiment with different layouts without rebuilding your content.
Columns can also be added or removed as your page evolves.
Note: Deleting a column also removes any components it contains.
Layout Rows integrate directly with your brand theme.
You can:
This ensures your layouts remain visually consistent throughout your brand guide.
Click Save Component to apply your updates.
Your changes are immediately reflected in the live preview, making it easy to review your layout before continuing.
The Layout Row Component provides the structural framework for building responsive page layouts.
By combining flexible columns with nested components, it allows you to create everything from simple two-column sections to sophisticated multi-column designs while maintaining a clean, organized editing experience.
