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.
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…
| Your goal | Use this component |
|---|---|
Display 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
| Element | Purpose |
|---|---|
Column 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
| Features | Standards |
|---|---|
Optimized color contrast | Minimum Contrast |
Underlining used to indicate links | Link Indicators |
Left-aligned Headings and text | Text Block Alignment |
Columns Showcase
