Columns

Columns are used to lay out and align content.

This component is based on USWDS.

By default, columns are arranged in a 50/50% layout, and only two columns per row.

Example:

How to author:

In the DA menu, choose Block. Then add your text to the columns in the block.

Adding columns

To add more columns, select a column block, click on "Edit Block," and then choose to either append or prepend columns from the DA side menu. Appending columns will add a column to the right, while prepending will add one to the left. You can include up to 12 columns in each row.

Example:

Changing default layout

To change the default layout so that columns will take up the space you would prefer, you need to add a layout class to the columns block.

This class will be added in parentheses following the column's block title. It should read like this: columns(layout-6/3/3) where “6” is the width of the first column, “3” is the width of the second column, and “3” is the width of the third column. The sum of each width should equal 12, and the size of the column will be determined by the number.

For example, a two-column layout with the class columns(layout-9/3) will make the first column take up 75% of the total width, and the second column only 25%.

Example: