The 2 Column Layout component allows you to organize content into two side-by-side columns. This setup is ideal for displaying text, images, or other elements in parallel. You can easily adjust the width of each column to fit your content, and on smaller screens, the columns will automatically stack into a single column layout for better viewing.
Example
This is the first column of our 2 column layout.
This is the second column of our 2 column layout.
Layout and Styling Options
Column Widths
Column width: 2
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 3
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 4
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 5
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 6
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 7
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 8
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 9
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: 10
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column width: Auto
This column will shrink to fit the width of this content.
Column width: Undefined
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bottom margin
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large
the end
Top margin
Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large
the end
Usage
Do
- Consider the balance between columns to ensure content is visually appealing and easy to read.
- Adjust column widths to suit the type and amount of content you’re displaying in each section.
- Maintain consistent styling across both columns for a cohesive appearance.
- Ensure that images or media used in one column are properly aligned and do not overflow into the other column.
- Preview your page to make sure the columns stack correctly on mobile devices, preserving the flow of content.
Don't
- Don’t place unrelated content in the two columns; ensure that the content in each column complements the other.
- Avoid using columns for complex, lengthy content that would be better suited to a full-width layout.
- Refrain from overusing multiple column layouts on a single page, which can lead to a disjointed and confusing user experience.