Four Column in Rich Text
0001-01-01
Default Four Columns
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Stack None
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Stack Medium
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Stack Small
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Layout 1
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Layout 2
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Layout 3
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four Cols - Layout 4
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
Four 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-thick margins-none stack-medium
- Columns: padding
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.