UIKit 1 - 4 column layout components

UIKit 1 - 4 column layout components

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 or right, or distributed evenly.
• Space between columns - Set the columns to have a space (gutter) between them or no space between them.
• Padding top and bottom - Set a space above and/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.
• Section height - Set the minimum height of the layout. Choose between Fit to content, % height or pixel height.
• Column width - Set the width of each column.
• Column display order - Set the order in which the columns are displayed. This is useful for changing the order of the columns by device width. For example, if column 1 contains text and column two contains an image, you may want the image to display before the text when the columns stack on a phone device.
• Vertically align content - If the content is smaller than the height of the column it's within, you can set its vertical position to Top, Middle, or Bottom. Note: The column's content must have its height set to Fit to content and not Fill space available for vertical alignment to take effect.
• Offset column - Move the column left or right on Desktop and Tablet width devices. On phone devices, all offsets are removed as the content will be stacked vertically.
• Background color - Optionally set the background color of the row.
• Background image - Optionally set a background image for the row.
• Alternative image for phone - Toggle on to upload an alternative image to show on phones.

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 or right, or distributed evenly.
• Space between columns - Set the columns to have a space (gutter) between them or no space between them.
• Padding top and bottom - Set a space above and/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.
• Section height - Set the minimum height of the layout. Choose between Fit to content, % height or pixel height.
• Column width - Set the width of each column.
• Column display order - Set the order in which the columns are displayed. This is useful for changing the order of the columns by device width. For example, if column 1 contains text and column two contains an image, you may want the image to display before the text when the columns stack on a phone device.
• Vertically align content - If the content is smaller than the height of the column it's within, you can set its vertical position to Top, Middle, or Bottom. Note: The column's content must have its height set to Fit to content and not Fill space available for vertical alignment to take effect.
• Offset column - Move the column left or right on Desktop and Tablet width devices. On phone devices, all offsets are removed as the content will be stacked vertically.
• Background color - Optionally set the background color of the row.
• Background image - Optionally set a background image for the row.
• Alternative image for phone - Toggle on to upload an alternative image to show on phones.