Application Launcher

Site Studio

UIKit row for columns and column components

Site Studio

UIKit row for columns and column components

You're viewing version 8.0 of this page. .

The Row for columns and column components combine to provide a very flexible system for creating one-off column based layouts and grids.

Key information about these components:

Row for columns component

Layout canvas elements

Full width container element - Provides a fluid width container for full width page section with a background color or background image.
Boxed width inner container - Provides a container that can be set to boxed width to contain the content within a page section to the responsive grid's width.
Row for columns element - Required for the columns.

Component form fields

Width of content area - Sets a maximum width to the content area. Boxed width restrains the content to a maximum set width. Full width allows the content to expand to fill the width available.
Column alignment - If the columns' combined width is set to less than full width, they can be aligned horizontally to the left, center, right, or distributed evenly.
Space between columns - Sets the columns to have a space (gutter) between them or no space between them.
Padding top and bottom - Sets a space above or below the content within the layout. This setting is needed when the layout is used at the top level as a section. It should be set to None if nesting this layout within another layout

You're viewing version 8.0 of this page. .

The Row for columns and column components combine to provide a very flexible system for creating one-off column based layouts and grids.

Key information about these components:

Row for columns component

Layout canvas elements

Full width container element - Provides a fluid width container for full width page section with a background color or background image.
Boxed width inner container - Provides a container that can be set to boxed width to contain the content within a page section to the responsive grid's width.
Row for columns element - Required for the columns.

Component form fields

Width of content area - Sets a maximum width to the content area. Boxed width restrains the content to a maximum set width. Full width allows the content to expand to fill the width available.
Column alignment - If the columns' combined width is set to less than full width, they can be aligned horizontally to the left, center, right, or distributed evenly.
Space between columns - Sets the columns to have a space (gutter) between them or no space between them.
Padding top and bottom - Sets a space above or below the content within the layout. This setting is needed when the layout is used at the top level as a section. It should be set to None if nesting this layout within another layout

You're viewing version 8.0 of this page. .

The Row for columns and column components combine to provide a very flexible system for creating one-off column based layouts and grids.

Key information about these components:

Row for columns component

Layout canvas elements

Full width container element - Provides a fluid width container for full width page section with a background color or background image.
Boxed width inner container - Provides a container that can be set to boxed width to contain the content within a page section to the responsive grid's width.
Row for columns element - Required for the columns.

Component form fields

Width of content area - Sets a maximum width to the content area. Boxed width restrains the content to a maximum set width. Full width allows the content to expand to fill the width available.
Column alignment - If the columns' combined width is set to less than full width, they can be aligned horizontally to the left, center, right, or distributed evenly.
Space between columns - Sets the columns to have a space (gutter) between them or no space between them.
Padding top and bottom - Sets a space above or below the content within the layout. This setting is needed when the layout is used at the top level as a section. It should be set to None if nesting this layout within another layout
Background color - Set the background color of the row.
Set a background image for the row.

Background image -

Alternative image for phone - Provides an alternative image to show on phones.

Layout canvas elements

Column element - This provides the column. It has been set to display:flex and flex-direction:column. These CSS properties should not be changed as they allow content placed within the column to fill the column height.
Drop zone - The drop zone for content to be placed within.

Component form fields

Desktop width - Sets the width of the column when it's displayed on a device at desktop width.
Tablet width - Sets the width of the column when it's displayed on a device at tablet width.
Phone width - Sets the width of the column when it's displayed on a device at phone width.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Background color - Set the background color of the row.

Background image - Set a background image for the row.

Alternative image for phone - Provides an alternative image to show on phones.

Layout canvas elements

Column element - This provides the column. It has been set to display:flex and flex-direction:column. These CSS properties should not be changed as they allow content placed within the column to fill the column height.
Drop zone - The drop zone for content to be placed within.

Component form fields

Desktop width - Sets the width of the column when it's displayed on a device at desktop width.
Tablet width - Sets the width of the column when it's displayed on a device at tablet width.
Phone width - Sets the width of the column when it's displayed on a device at phone width.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Row for columns component

Layout canvas elements

Component form fields

Row for columns component

Layout canvas elements

Component form fields

Row for columns component

Layout canvas elements

Component form fields

Column component

Layout canvas elements

Component form fields

Did not find what you were looking for?

Column component

Layout canvas elements

Component form fields

Did not find what you were looking for?