Two Column Split

The Two column split component allows other components to be arranged in two side-by-side columns.

CategoryValue
May contain Accordion, Article grid, Calendar, Call to action, Component grid, Container, Event list, Image, Links, Snippet, Text, Video
May be placed in Content region, Region 3, Container
FieldDescription
Ratio The width of columns are relative to each other.  This means 2:1 (default) allows column one to be twice as wide as column two, 1:1 allows columns to be the same width and 1:2 allows column two to be twice as wide as column one.
Column one Field for adding components to the first column.
Column two Field for adding components to the second column.

How to add a Two column split

  1. Select Two column split from the Component type drop down list and click the Add new Component or Add another Component button.

  2. Choose the desired Ratio.  Select 2:1 if you want Column one to occupy two thirds of the row width and Column two to occupy the remaining one third.  Select 1:1 if you want the two columns to each occupy half of the row width.  Select 1:2 if you want Column one to occupy one third of the row width and Column two to occupy the remaining two thirds.

  3. Add the desired components to Column one and Column two.

Things worth mentioning

  • If either Column one or Column two have had no components added to them, then the components that have been added to the either will be treated as if it were not in a two column split at all, ignoring the selected Ratio.

  • Full-width components like the Image and Video components have left and right padding added when placed inside the Two column split in order to retain alignment with other components. 

Examples

This is an example of a Two column split component with Ratio set to 1:1 and containing an Image component in Column one and a Call to action component in Column two.

student sitting a desk using a laptop.

Sample two column split #1

This Call to action component has additional text provided here.

Link for sample #1

 

The next example is a Two column split component with Ratio set to 2:1 and containing an Image component in Column one and a Call to action component in Column two.

student sitting at desk with laptop.

Sample two column split #2

This Call to action component has additional text provided here.

Link for sample 2

 

The next example is a Two column split component with Ratio set to 1:2 and containing a Call to action component in Column one and an Image component in Column two.

Sample two column split #3

This Call to action component has additional text provided here.

Link for sample #3

student sitting at desk with laptop.

The next example is the result of a Two column split component with an Image component in Column one, but no components in Column two.

 

student sitting at desk using a laptop.