Column Control Component
When should it be used?
Use the Column Control component when you need to display content side-by-side in two or three columns.
Note: Column components cannot be nested (i.e., they cannot be placed within one another).
Column Control Settings
You can specify the column layout by choosing between the following 8 options:
- 1 Column (100%)
- 2 Columns (50%, 50%)
- 2 Columns (33%, 67%)
- 2 Columns (67%, 33%)
- 3 Columns (33%, 33%, 33%)
- 3 Columns (25%, 25%, 50%)
- 3 Columns (50%, 25%, 25%)
- 4 Columns (25%, 25%, 25%, 25%)
Additionally, you can control padding and margins in these column:
- Use Full width to stretch your content to full width of the user's screen and/or No spacing to remove space between, above and below individual columns
- In CLF4, use pad and margin CSS classes in your Column Control and other content components to further refine spacing. See generic styles >