Rich Text Two Columns
Content in the first column.
Content in the second column.
Two Cols - Layout 1
Content in the first column.
Content in the second column.
Two Cols - Layout 2
Content in the first column.
Content in the second column.
Two Cols - Layout 3
Content in the first column.
Content in the second column.
Two Cols - Layout 4
Content in the first column.
Content in the second column.
Two Cols - Layout 5
Content in the first column.
Content in the second column.
Two Cols - Layout 6
Content in the first column.
Content in the second column.
Two Cols - Stack None
Content in the first column.
Content in the second column.
Two Cols - Stack Medium
Content in the first column.
Content in the second column.
Two Cols - Stack Small + More Than 2 Columns in the Block
Content in the first column.
Content in the second column.
Content in the first column.
Content in the second column.
Two Cols with Helper Classes
Available classes specific to columns layouts include:
- margins-none
- gutters(-none|thinnest|thinner|thin|thick|thicker|thickest|border|border-thick|border-thicker|border-thickest)
- dividers
- 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:
- First block: divider divider gutters-none stack-medium + padding on columns
- Second block: divider stack-medium (standard gutters, no class name for this) + padding-thick on columns
- Third block: divider reverse-medium gutters-thick stack-medium + padding-thick on columns
- Fourth block: divider reverse gutters-thick stack-medium + padding-thick on columns
Content in the first column - col padding.
Content in the second column - col padding.
Content in the first column - col padding-thick.
Content in the second column padding-thick.
Content in the first column - col padding-thick.
Content in the second column padding-thick.
Content in the first column - col padding-thick.
Content in the second column padding-thick.
The gutters-border classes implement very thin gutters that feel more like borders around the columns.
Content in the first column - col padding.
Content in the second column - col padding.
Dividers separate columns with a visible line. Dividers exist in the middle of a gutter.
Content in the first column - col padding-thick.
Content in the second column padding-thick.
So for instance you can have borders around your column blocks and still separate the columns with gutters and a visible divider:
Content in the first column - col padding-thick border.
Content in the second column padding-thick border.
Use dividers with gutters-none and a border on the columns block to make it look like a grid:
Content in the first column - col padding-thick border.
Content in the second column padding-thick border.
Columns and Boxes
Columns can be boxes, which works well if you want everything to be lined up, and they can include standard block helper classes...
- cols-2 gutters-thin stack-medium on the block
- col box padding bg-mid-dark-color-grey on both columns plus some rounded edges
Content in the first column - col box rounded-more padding bg-mid-dark-color-grey.
And more content in this box so the content area is taller.
Content in the second column - col box rounded-less padding bg-mid-dark-color-grey.
... or columns can have boxes inside them, which works well if you want to get fancy with alignment and layout:
- cols-2 gutters-thin stack-medium align-items-center on the block
- Plain old "col" on the columns
- Boxes with helper classes in the columns
Content in a box - box padding bg-mid-dark-color-grey ratio ratio-1x1 align-items-center ellipse text-center.
A second paragraph to make it taller.
Remember that content in a ratio box must be in a nested box of its own for layout to work nicely..
Content in a box - box padding bg-mid-dark-color-grey.
Another box here.
Default Two Columns
Content in the first column.
Content in the second column.
Two Cols - Layout 1
Content in the first column.
Content in the second column.
Two Cols - Layout 2
Content in the first column.
Content in the second column.
Two Cols - Layout 3
Content in the first column.
Content in the second column.
Two Cols - Layout 4
Content in the first column.
Content in the second column.
Two Cols - Layout 5
Content in the first column.
Content in the second column.
Two Cols - Layout 6
Content in the first column.
Content in the second column.
Two Cols - Stack None
Content in the first column.
Content in the second column.
Two Cols - Stack Medium
Content in the first column.
Content in the second column.
Two Cols - Stack Small + More Than 2 Columns in the Block
Content in the first column.
Content in the first column.
Content in the second column.
Content in the second column.
Two Cols with Helper Classes
Available classes specific to columns layouts include:
- margins-none
- gutters(-none|thinnest|thinner|thin|thick|thicker|thickest|border|border-thick|border-thicker|border-thickest)
- dividers
- 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:
- First block: divider divider gutters-none stack-medium + padding on columns
- Second block: divider stack-medium (standard gutters, no class name for this) + padding-thick on columns
- Third block: divider reverse-medium gutters-thick stack-medium + padding-thick on columns
- Fourth block: divider reverse gutters-thick stack-medium + padding-thick on columns
Content in the first column - col padding.
Content in the first column - col padding-thick.
Content in the first column - col padding-thick.
Content in the first column - col padding-thick.
Content in the first column - col padding-thick.
The gutters-border classes implement very thin gutters that feel more like borders around the columns.
Content in the first column - col padding.
Dividers separate columns with a visible line. Dividers exist in the middle of a gutter.
Content in the second column padding-thick.
So for instance you can have borders around your column blocks and still separate the columns with gutters and a visible divider:
Content in the second column padding-thick border.
Use dividers with gutters-none and a border on the columns block to make it look like a grid:
Content in the second column padding-thick border.
Content in the second column padding-thick.
Content in the second column padding-thick.
Content in the second column padding-thick.
Content in the second column padding-thick
Content in the second column padding-thick
Content in the second column - col padding.
Content in the first column - col padding-thick.
Content in the first column - col padding-thick border.
Content in the first column - col padding-thick border.
Columns and Boxes
Columns can be boxes, which works well if you want everything to be lined up, and they can include standard block helper classes...
- cols-2 gutters-thin stack-medium on the block
- col box padding bg-mid-dark-gray on both columns plus some rounded edges
Content in the first column - col box rounded-more padding bg-mid-dark-gray.
And more content in this box so the content area is taller.
Content in the second column - col box rounded-less padding bg-mid-dark-gray.
... or columns can have boxes inside them, which works well if you want to get fancy with alignment and layout:
- cols-2 gutters-thin stack-medium align-items-center on the block
- Plain old "col" on the columns
- Boxes with helper classes in the columns