Five Columns in Rich Text
0001-01-01
Default Five Columns
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Cols - Stack None
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Cols - Stack Medium
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Cols - Stack Small
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Columns - Layout 1
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Columns - Layout 2
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Columns - Layout 3
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Columns - Layout 4
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Five Cols with Helper Classes
Available classes specific to columns layouts include:
- margins-none
- gutters(-none|thinnest|thinner|thin|thick|thicker|thickest)
- divider
- reverse(-medium|small|tiny|micro)
- Standard block classes - e.g. align-items-top|center|bottom, text-left|center|right, padding(-thinnest|thinner|thin|thick|thicker|thickest), margin/margins
This example uses:
- Block: divider gutters-thin margins-none stack-medium
- Columns: padding
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.