Simon Fraser University
Engaging the World

Content Management System

Home / Working in AEM / Components / Column Control Component

AEM started using SFU Groups for access management on Wednesday, December 11.
If you lost access, please reach out to your site owner.

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%)

There are three additional layouts in CLF4:

  • 2 Columns (25%, 75%)
  • 2 Columns (75%, 25%)
  • 3 Columns (25%, 50%, 25%)

General

Column layout options

Additional column controls in CLF4:

  • 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 
  • Use pad and margin CSS classes in your Column Control and other content components to further refine spacing. 
    See generic styles >
    See how to design your homepage >
Column spacing options

Examples of Column Control usage

See 2 Columns Component or 3 Columns Component for examples.