4 Columns Component
The 4 Columns component allows you to display content in three columns, side-by-side. The columns are equal width: 25% / 25% / 25% / 25%
When should it be used?
Use the 3 Columns component when you need to display content side-by-side in four columns.
Note: The 4 Columns component can be added by dragging a Column Control component to the page and selecting "4 Columns (25%, 25%, 25%, 25%)" from the drop-down menu. Column components cannot be nested (i.e., they cannot be placed within one another).
Styles
col-clear
In some situations, you may want the content of a column component to be rendered side-by-side only when viewed on a large desktop screen. By applying the col-clear style, the columns will stack up or "clear" at a wider breakpoint than usual (980px as opposed to 480px).
This is technique is particularly useful for columns that contain a lot of text. As the screen width decreases, the length of the sentences may become so short as to be unreadable. The col-clear style will ensure long, legible line lengths at smaller screen widths.
At the mobile tablet breakpoint, the 4 Columns component will break at the second column, creating the appearance of two sets of side-by-side columns, stacked on top of eachother. To see this in action, reduce the width of your desktop window until it's at 768px wide.
Examples
4-Column Component 25% / 25% / 25% / 25%
This is the first column. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
This is the second column. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
This is the third column. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
This is the fourth column. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?