Skip to main content
Our new developer certification is live!

TwoColumn

Two-column layout section that renders nested components on each side using ComponentsRenderer.

Props

PropTypeRequiredDefaultDescription
titlestringNo-Section title
title_tag'h1' | 'h2' | 'h3' | 'h4' | 'p'No'h2'HTML tag for title
descriptionstringNo-Plain text description below title
side_aComponentsPage[]No-Components for the left column
side_bComponentsPage[]No-Components for the right column
$CSLPFieldMappingNo-CSLP mapping for editable fields

Usage

import { TwoColumn } from '@/components/organisms/TwoColumn';

<TwoColumn
  title="Compare Features"
  title_tag="h2"
  description="See how our products stack up"
  side_a={[{ list: { title: "Pro", cards: [...] } }]}
  side_b={[{ list: { title: "Enterprise", cards: [...] } }]}
/>

Features

  • Nested components: Each side renders its own components via ComponentsRenderer
  • Responsive layout: Stacks vertically on mobile, side-by-side on desktop (lg breakpoint)
  • No padding passthrough: Passes noPadding to child ComponentsRenderer so nested components don't add their own section padding
  • Optional title and description: Both are optional; section renders nothing if all content is empty

Layout

  • Mobile: Single column, stacked vertically with gap-8
  • Desktop (lg+): Two equal columns (flex-1 each) with gap-12

Notes

  • Returns null if title, description, and both sides are empty
  • Each side uses its own ComponentsRenderer with CSLP wrapper (side_a, side_b)
  • Registered as two_column in the ComponentsRenderer componentMap
  • Child components (List, RichText, etc.) receive noPadding to avoid double padding