Column controls

PATTERN OVERVIEW

Assign a column layout to an area on a page or set the background color. The layouts are responsive and will reflow on tablet and mobile.

Guidelines

• When authoring a page use the individual column controls to add columns to the page and create sections that can be easily modified.
  
  
• The text3 and adaptive image components are placed inside of the columns. 
  • The text3 component is added to a column and the copy added to the component will span the width of the column it is placed inside of.
  • The adaptive image placed inside of a column sizes (adapts) to span the width of the column.
• Multiple column controls are used to give a page structure and break it up into scannable sections.
  
  
• The default overall column width is 1280 pxs. When necessary, the overall column width can be decreased to 1080 or 880 pxs to help visually balance the content within a section.
  
  
• By default, the column control is set to include padding above and below the component. The padding can be removed by using the "None" setting within the column control.  
  
  
• By default, the column control background color is white, or it can be set to Black, Off Black, Dark Gray, Off White (light gray) or Gradient (gray to white linear gradient).

AEM component: 

To add equal width columns use:

• 1 column (full)
• 2 column (1/2 - 1/2)
• 2 column - Background Color Options (mixed background colors) - DO NOT USE
  
• 3 column (1/3 - 1/3 - 1/3)
• 4 column (1/4 - 1/4 - 1/4 - 1/4)
• 5 column (1/5 - 1/5 - 1/5 - 1/5 - 1/5)

To add mixed width columns use:

• 2 column (1/4 - 3/4)
• 2 column (3/4 - 1/4)
• 2 column (2/3 - 1/3)
• 2 column (1/3 - 2/3)
• 3 column (1/4 -1/2 - 1/4)

To add a background image use:

• Full width image
  
• Full Width Image - Double Background (1/2 - 1/2) - DO NOT USE