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.