Multi Column Layout Example

A demonstration of the MultiColumn component for organizing content

Multi Column Layout Demo

This page demonstrates the MultiColumn component for organizing rich text content in multiple columns.

Equal Columns (50/50)

Left Column Content

This is the left column. It contains rich text that can include:

  • Bold text
  • Italic text
  • Lists
  • Links
  • And more markdown features

The columns will stack vertically on mobile devices for better readability.

Right Column Content

This is the right column. It can contain different types of content:

  1. Numbered lists
  2. Code snippets
  3. Images
  4. Any markdown content

Both columns are equal width on desktop screens.

Left-Wide Layout (60/40)

Main Content Area

The left column is wider (60%) which is perfect for:

  • Main article content
  • Detailed explanations
  • Long-form text
  • Primary information

This layout works great when you have a main content area with supplementary information on the side.

The right column is narrower (40%):

  • Quick tips
  • Side notes
  • Related links
  • Callouts

Right-Wide Layout (40/60)

Supporting Content

The left column is narrower in this layout:

  • Images
  • Icons
  • Quick facts
  • Stats

Primary Content

The right column gets more space (60%):

  • Detailed descriptions
  • Main content
  • Longer explanations
  • Primary focus area

This is useful when you want to emphasize the right side content.

Three Column Layout

Feature Set A

Perfect for organizing related items:

  • Authentication
  • Authorization
  • User Management
  • Session Handling

Feature Set B

Middle column with equal width:

  • API Integration
  • Webhooks
  • Real-time Events
  • Data Sync

Feature Set C

Third column for additional content:

  • Analytics
  • Reporting
  • Export Tools
  • Dashboard

Use Cases

The MultiColumn component is perfect for:

Documentation Layout

  • Code examples on one side, explanations on the other
  • Before/after comparisons
  • Feature lists with descriptions

Marketing Content

  • Benefits and features side-by-side
  • Testimonials with supporting text
  • Product comparisons

Technical Guides

  • Step-by-step instructions with screenshots
  • Configuration options with descriptions
  • API documentation with examples

Configuration Options

The component supports several props:

  • columns: 2 | 3 (default: 2) - Number of columns to display
  • ratio: 'equal' | 'left-wide' | 'right-wide' (default: 'equal') - Only applies to 2-column layouts
  • gap: 'sm' | 'md' | 'lg' | 'xl' (default: 'md') - Spacing between columns
  • breakpoint: 'sm' | 'md' | 'lg' (default: 'md') - When columns should stack

All columns automatically stack vertically on mobile for optimal reading experience.