Webmaster's Blog

Boxed Sections (Columns/Borders) Snippet

Published
By

This snippet creates a two- to five-column layout with the columns being evenly spaced in the available area or a two-column layout with one column being 2/3 of the space and the other 1/3. Text, images, videos, snippets, and assets can be added to each column. It can also be used to add a border around content.

This snippet should not be used to put bulleted lists or buttons into multiple columns. Instead, use the List Unordered Classes Snippet to split bulleted items into two or three columns or the Buttons in a Row Snippet to have up to five buttons next to each other horizontally.

2 even column boxed section example with border on second column.

2/3 1/3 boxed section example.

Boxed sections snippet.

  1. Select the desired layout type from the dropdown. View Boxed Section layouts in the Style Guide. When using in an asset, you must type the correct code in the field (without quotation marks):
    1. single column: “1-even-columns”
    2. 2 even columns: “2-even-columns”
    3. 3 even columns: “3-even-columns”
    4. 4 even columns: “4-even-columns”
    5. 5 even columns: “5-even-columns”
    6. 1/3 left 2/3 right: “one-third-two-thirds”
    7. 2/3 left 1/3 right: “two-thirds-one-third”
  2. Select the desired border option from the dropdown. Borders should not be used with cards. View border options in the Style Guide. When using in an asset, type the noted text (without quotation marks):
    1. No Border: “no-border”
    2. Full Border: one border around all content, “grid-border”
    3. All Individual Cells: a border around the content in each cell that is used, “column-border”
    4. 1st Column Cells Only: a border around the cells in the first column of content, “1-column”
    5. 2nd Column Cells Only: a border around the cells in the second column of content, “2-column”
    6. 3rd Column Cells Only: a border around the cells in the third column of content, “3-column”
    7. 4th Column Cells Only: a border around the cells in the fourth column of content, “4-column”
    8. 5th Column Cells Only: a border around the cells in the fifth column of content, “5-column”
  3. If you are inserting cards in all columns, you can change the Spacing dropdown to No Gutter Spacing (“no-gutter-spacing” without quotation marks in an asset) to style the cards without space between them.
    Example of three cards in a boxed section with no gutter spacing.
  4. Insert content into the needed columns. If you are inserting text into a column, be sure to first select Paragraph from the Paragraph dropdown in the toolbar. To add more rows of columns, right click within the row, hover over Rows, and select Insert Row After.
    1. If your page has no left navigation and no right sidebar, you can use up to all five columns.
    2. If you have either the left navigation or right sidebar, only use up to four columns.
    3. If you have both the left navigation and right sidebar, use up to three columns.
, , ,