Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
Live Demo
Actually clickableCraft Meets Code
“The definitive visual dictionary for builders.”
What you just saw:A modern SaaS sign-in screen: the entire left half is a deep navy gradient featuring an illustration and rotating testimonials, while the right half is a crisp white form with login fields.
What it actually is
Split Screen harmonizes emotional brand resonance with focused transactional tasks. Commonly leveraged across login portals, checkout funnels, and dual-choice forks: one pane bathes the user in rich brand visuals, customer testimonials, or animations, while the companion pane provides a distraction-free interactive form.
Anatomy · What it's made of
Brand Visual Pane品牌视觉半屏
Immersive visual storytelling, illustration, or proof quote
Interactive Pane交互表单半屏
Clean form inputs, task controls, and primary action buttons
Central Divider中分分割线
Clean color boundary or hairline border splitting the screen
Mobile Collapse移动端折叠规则
Responsive breakdown collapsing into a focused single pane
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Authentication flows (sign in, sign up, password recovery) | Yes |
| Dual-path onboarding forks (e.g. Individual vs Team selection) | Yes |
| Checkout flows (left-side order summary, right-side payment form) | Yes |
| Mobile-only native apps where horizontal 50/50 splits starve touch targets | No |
| Data-dense analytical dashboards where half-screen wastes horizontal space | No |
Preserving horizontal splits on mobile screens, squeezing forms into unusable slivers.
Failing to hide decorative graphics on mobile, forcing users to scroll past fluff to reach inputs.
Similar Patterns
Don't mix these upSplit ScreenCurrent
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
In one line:Divides the screen into equal halves, balancing emotional storytelling with functional utility.
Hero Section
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a split-screen login page: left pane desktop-only with dark branding, product illustration, and testimonial; right pane white background with centered login inputs and social auth buttons.
Don't just say this to AI
Bad → BetterDon't say this to AI
Put image on left and form on right.
Say this instead
Build a responsive split-screen auth template: min-h-screen lg:grid-cols-2, left decorative billboard (desktop only, deep palette + quote), right focused form (centered max-w-md), collapsing gracefully on mobile.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.