Column Control

The Column Control component divides the page or a section of the page into separate content areas vertically. When a Column component is used, other components can be placed within each column to meet the needs of the content to be displayed. If a Column Control component is not used, the width of the area for content will be a maximum of 1252 px wide.

Single Column - no column control: max. 1252px wide

Column Options

Please note the sizes below are for large screen widths. Once the columns stack at the medium and small screen sizes, the column widths will be that of the device minus 20px for the left and right margins.

1 Column

75 Centered

max. 934px wide

2 Columns

75/25

max. 934px wide

max. 298px wide


60/40

max. 722px wide

max. 510px wide


50/50

max. 616px wide

max. 616px wide


40/60

max. 510px wide

max. 722px wide


25/75

max. 298px wide

max. 934px wide


33/33 Centered

max. 404px wide

max. 404px wide

3 Columns

33/33/33

max. 404px wide

max. 404px wide

max. 404px wide


25/50/25

max. 298px wide

max. 616px wide

max. 298px wide


25/25/25 Centered

max. 298px wide

max. 298px wide

max. 298px wide

4 Columns

25/25/25/25

max. 298px wide

max. 298px wide

max. 298px wide

max. 298px wide

5 Columns

16.6 Centered

max. 192px wide

max. 192px wide

max. 192px wide

max. 192px wide

max. 192px wide

6 Columns

16.6

max. 192px wide

max. 192px wide

max. 192px wide

max. 192px wide

max. 192px wide

max. 192px wide

Authoring, Requirements and Specifications

Column Count

  • Usage: Determines number of columns


Column Width

  • Usage: Width of each column as a percentage
    • DO NOT USE 80/20 or 20/80 for 2 Columns because that is a legacy option and the same as 75/25 or 25/75


Reverse Column Stacking on Mobile

  • Usage: When selected, the column stacking will be reversed so that column 2 will be displayed above column 1 when stacked on smaller screens (less than 801px wide) 
    • Only available when 2 Columns is selected
    • When authoring, make the selection first, then add content to the columns 
  • Example:

Column 2

Column 1

Column control reverse stacking TEST

TEST CMA; Smaller column on right

for Mobile the content on the right appears above the content on the left

25

TEST CMA; larger Column on left 

75