Full Width (No gutters + No Padding)

Full Width

Wide Width

Regular Width

Narrow Width

Extra Narrow Width

Ultra Narrow Width

2 Column (50)

2 Column (50)

2 Column (60)

2 Column (40)

2 Column (40)

2 Column (60)

2 Column (66)

2 Column (33)

2 Column (33)

2 Column (66)

2 Column (75)

2 Column (25)

2 Column (25)

2 Column (75)

3 Column (33)

3 Column (33)

3 Column (33)

3 Column (25)

3 Column (50)

3 Column (25)

3 Column (25)

3 Column (25)

3 Column (50)

3 Column (50)

3 Column (25)

3 Column (25)

4 Column

4 Column

4 Column

4 Column

6 Column

6 Column

6 Column

6 Column

6 Column

6 Column

Padding

Padding in the context of a section is the space above and below a section. There are several sizing options available to the content editor. The default and most common option to use is "Large (Bottom)", as this will allow the content editor to create a page with a banner from top to bottom using a standard and even layout between each section.

Gutters

Gutters in the context of a section is the spacing between columns (and rows when columns stack on mobile).  There are several sizing options available to the content editor. By default, there is no row gutter applied to a section. It is important that you use a gutter option with "w/Row" in the name for most situations when using a multi-column layout. This is so that when the columns stack on mobile and tablet screens, the content in each column will not collide with the content below/above it.


Overlap Section (Bottom)


Background Colour Applied


Overlap Section (Top)




Vertically Align Content Enabled



This setting vertically aligns column content

Glow Effect Applied

Reverse order on mobile applied

On mobile, columns are ordered from left to right vertically. When this option is applied they stack from right to left. 

This column is on the left on desktop.
This column is second on mobile.




This column is on the right on desktop.
This column is first on mobile.

Tab Section

This option is to be used on a section that sits below a page banner widget that is has page tabs selected. (Example + Instructions)

Background Image Applied