Skip to main content

Home Page Patterns Split screen

Split screen

Two equal panels side by side, each with its own content.

A split-screen layout divides the viewport in half — typically left and right. Each side might show a different option (sign up vs log in) or different content (image left, text right).

Split-screen is dramatic and forces a choice or comparison. Make sure both halves can stand alone and that the divider line is clean. On mobile, the two halves usually stack vertically.

Related terms