2 Columns Component
The 2 Columns component allows you to display content in two columns, side-by-side. There are several options for the sizing of the columns:
- 50% / 50%
- 67% / 33%
- 33% / 67%
When the page is resized, or viewed on a mobile device, the columns will continue to float side-by-side until the window reaches a certain width (or breakpoint), at which point columns and their contents will stack up. For example, a 50% / 50% 2-column component will display its contents side-by-side unless viewed on a mobile device with a maximum screen width of 480px.
When should it be used?
Use the 2 Columns component when you need to display content in two columns, side-by-side.
Note: 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.
Examples
2-Column Component: 50% / 50%
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
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?
2-Column Component: 33% / 67%
This is the first 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 second 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. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
2-Column Component: 67% / 33%
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
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?
2-Column Component: 50% / 50% with col-clear style
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
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?