Column Control Component

The Column Control component is essentially the same as the 2 Column and 3 Column components.  It allows you to choose from a selection of multiple column layouts and defaults to a single column.

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 >
Column layout options
Column spacing options

Examples of Column Control usage

See 2 Columns Component or 3 Columns Component for examples.