Studiov1.2.3
Studio/Patterns/Split Content

Split Content

Layout

50/50 horizontal split with text content on one side and image or illustration on the other. Alternates direction for visual rhythm.

All patterns
split content
Reusable pane preview
Use Cases
  • About pages with alternating feature sections
  • Product detail explanations
  • Case study highlights
  • How-it-works step explanations
Do
  • Alternate image left/right between sections
  • Keep text content concise (headline + 2-3 sentences + CTA)
  • Use aspect ratio consistent images
  • Stack vertically on mobile
Avoid
  • Use more than 3 consecutive split sections
  • Place large tables or forms in the text side
  • Use landscape images on the image side (prefer portrait or square)
  • Mix split content with full-width sections without spacing
Reference component: SplitContentVariants: 2Token bindings: 4