| Category | Value |
|---|---|
| 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 |
| Field | Description |
|---|---|
| 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
Select Two column split from the Component type drop down list and click the Add new Component or Add another Component button.
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.
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.
Sample two column split #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.
Sample two column split #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
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.
