Layout & Component Blocks

Two Columns

Overview

The Two-Column component allows you to display content side by side, creating a balanced layout that improves readability and visual hierarchy. It’s commonly used for pairing text with images, showcasing features, or organizing related content in a structured way.

When to Use

  • To present related content side by side (e.g., text + image, comparison tables).
  • To create visual balance and break up long sections of text.

Two Column Example

50% column

This is an example of a 50% / 50% two column layout.

50% column

Both columns appear as the same width.

33% column

This is an example of a 33% / 66% two column layout.

66% Column

The 33% column is smaller and the 66% column is wider. You can select the split that allows for the 33% column to be on the left or right.

How To

Create a Two Column 

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Two Column Component from the component list.
Screenshot of the two column component showing the editor options

Add Items

The two column layout only allows for specific components to be used within the columns. If you would like to use a different component or need a different layout consider using another component.

  1. In the component settings, click the plus (+) icon to add items within each column.
    1. Below are links to each of the how-tos for the available components.

The available components are: 

  1. Embedded Video
  2. Button Group
  3. Image
  4. Text
  5. HTML (for some User roles)
Screenshot of the available components within a two column component layout

Choose the Column Split.

  1. Select one of the available layouts:
    1. 50% / 50%
    2. 33% / 66%
    3. 66% / 33%

Set Stacked Order (Mobile View)

  • This will define how columns stack on smaller screens:
    • Left to Right: Left column appears on top, right column below.
    • Right to Left: Right column appears on top, left column below.

User Experience Best Practices

  • Prioritize Content Hierarchy. Place the most important content in the first column.
  • Avoid Overuse. Use two-column layouts for related content only. Don’t split unrelated information as it can confuse users. 

Related Components

  • 50/50: this component offers a styled left/right text and image layout.
  • Spotlight: this component offers a two column layout with an image on the left and accordions on the right.
  • Info Block: a great way to break up a page by adding color contrast to sections with only text and links
  • Statistics: statistics can be used to communicate valuable stats to advertise a school/program.
  • Grid: Have multiple items to showcase? A grid might be a great alternative for text and image (gallery) needs.
  • Featured Cards: Featured cards work great as a high visual alternative.