#  Columns 

 



 ##  

  expand\_more  

 
  

 

Purpose of Columns

### Arrange content side by side for comparison or balance 

 

This component helps structure page content into multiple vertical sections, improving layout flexibility and readability.



 



      ![Columns component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Columns.png?itok=hAONJIcA) 

 

 

 *Example page context showing where Columns are typically used*

   

 



 

 

 

##  ✓ Use this component when: 

 



- You need to display content **side by side**
- Users benefit from comparing related information
- You want to create visual balance within a page section
- The content is short to medium in length



 

 

##  ✕ Avoid using this component when: 

 



- Content must be read sequentially from top to bottom
- One column contains significantly more content than the other
- The layout becomes too dense on smaller screens
- The page relies heavily on narrow side navigation



 

 

 

 

##  Choosing between similar components 

If your goal is…

SortYour goalUse this componentDisplay content side by side

Columns

Show all content at once

50/50 Card

Present multiple equal content previews

Vertical Cards

Hide and reveal related details

Accordion







 

##  Columns overview 

A Columns component is a two-column layout used to place content side by side, often for comparison or to present related information in parallel.



 

##  Example: Presenting related information side by side 

This example shows Columns used to display related information in parallel, allowing users to compare or scan content efficiently without excessive scrolling.

 

 



###  Make the paragraph the unit of composition 

 



If the subject on which you are writing is of slight extent, there may be no need of subdividing it into topics.



 

 

###  Begin each paragraph with a topic sentence 

 



Enable the reader to discover the purpose of each paragraph as they begin to read it, and to retain their purpose in mind as they end it.



 

 

 

 

##  Elements of Columns 

SortElementPurposeColumn Heading

Describes the topic of the column

Text Panel

Contains the column content, which can include formatted text, images, and links as well as other components







 

##  Guidance on using Columns 

- **Use for comparison or parallel content.** Place two closely related pieces of content side by side to help users evaluate or act.
- **Keep content balanced.** Aim for similar length and weight in each column to maintain visual balance.
- **Preserve reading order.** Ensure the left-to-right order still makes sense when stacked vertically on smaller screens.
- **Avoid layout misuse.** Do not use columns for long-form text or tabular data—use Text or Simple Table components instead.
- **Support scannability.** Break content into short paragraphs, headings, and links to aid quick scanning.
- **Maintain accessibility.** Use high-contrast background and text colors, and provide clear headings and link indicators



 

##  Content guidelines 

 



**Keep content concise**  
Short to medium-length content works best within columns.

**Maintain clear hierarchy**  
Use headings and spacing to preserve clarity within each column.



 

 

**Avoid splitting dependent content**  
Content that must be read together should not be separated across columns.



 

 

 

 

##  Accessibility considerations 

- Ensure logical reading order when columns stack vertically
- Avoid overly narrow columns that reduce text legibility
- Maintain sufficient contrast within each column
- Use semantic headings within column content



 

##  Columns features 

SortFeaturesStandardsOptimized color contrast

Minimum Contrast

Underlining used to indicate links

Link Indicators

Left-aligned Headings and text

Text Block Alignment







 

 



 

 See also:- [ Components ](/page-categories/components)
 
 

 

 

 

##  Columns Showcase 

 





###    Column with Header  expand\_more  

   ![Columns component](/sites/g/files/omnuum631/files/styles/hwp_1_1__960x960_scale/public/2025-09/example_columns_lp.png?itok=Dfpetf1j)