PixelTwoColumn

Two-column grid layout with preset ratios, responsive stacking, and surface-aware transitions.

  • Preset ratios (50/50, 60/40, 40/60, 70/30, 30/70) with JIT-safe class maps
  • Responsive stacking below sm, md, or lg breakpoints
  • Reverse order toggle to flip visual order without changing markup semantics
  • Token-based gap scale via stackGap for consistent rhythm
  • Surface-aware transitions
Status
stable
Category
layout
Since
v1.6.0

API

import { PixelTwoColumn } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
ratio'50/50' | '60/40' | '40/60' | '70/30' | '30/70''50/50'Width of the left column against the right one.
gap0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 166Gap token (stackGap).
reversebooleanfalseShow the right column first (CSS order; the DOM order stays).
stackBelow'sm' | 'md' | 'lg''md'Breakpoint below which the columns stack.
align'start' | 'center' | 'end' | 'stretch'—Block-axis alignment of the columns.
left (required)React.ReactNode—Content of the left column.
right (required)React.ReactNode—Content of the right column.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.
askeyof React.JSX.IntrinsicElements—Element to render.
borderedbooleanfalseSurface border and radius.

Also takes the native attributes and event handlers of <div> (HTMLAttributes<HTMLDivElement>).

ref points to <div>.

Accessibility

WCAG target: 2.1 AA

  • ratio-split-container

Renders as <div> with semantic neutrality; relies on inner content for landmarks and headings.

Usage

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelTwoColumn
      left={<div className="text-sm text-retro-muted">Left column</div>}
      right={<div className="text-sm text-retro-muted">Right column</div>}
    />
  );
}

Examples

Default

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelTwoColumn
      left={<div className="text-sm text-retro-muted">Left column</div>}
      right={<div className="text-sm text-retro-muted">Right column</div>}
    />
  );
}

Sixty Forty

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function SixtyForty() {
  return (
    <PixelTwoColumn
      ratio="60/40"
      gap={6}
      left={<div className="text-sm text-retro-muted">Main content (60%)</div>}
      right={<div className="text-sm text-retro-muted">Sidebar (40%)</div>}
    />
  );
}

Reversed

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function Reversed() {
  return (
    <PixelTwoColumn
      ratio="70/30"
      reverse
      left={<div className="text-sm text-retro-muted">Logical left</div>}
      right={<div className="text-sm text-retro-muted">Visually first</div>}
    />
  );
}

Stacked Below Lg

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function StackedBelowLg() {
  return (
    <PixelTwoColumn
      stackBelow="lg"
      align="center"
      left={<div className="text-sm text-retro-muted">Stacks below lg</div>}
      right={<div className="text-sm text-retro-muted">Side-by-side at lg+</div>}
    />
  );
}

Pixel Surface

import { PixelTwoColumn } from '@pxlkit/ui-kit';

export function PixelSurface() {
  return (
    <PixelTwoColumn
      surface="pixel"
      ratio="50/50"
      left={<div className="text-sm text-retro-muted">Surface-aware left</div>}
      right={<div className="text-sm text-retro-muted">Surface-aware right</div>}
    />
  );
}

Related