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.