Column split components
A column split is a structural marker that divides a page into two columns on larger displays. It has no person-facing question or answer; it controls where the second column begins.
Use it sparingly. A single-column page is usually easier to read, navigate and complete. Columns are most useful where two short, closely related pieces of content genuinely need to be compared side by side.
Choose a sensible split
The split position can be set across a 12-column layout. Common proportions are roughly one-third/two-thirds, half/half, and two-thirds/one-third.
flowchart LR
A[Use a column split] --> B[Place short related content in the first column]
B --> C[Place the matching content in the second column]
C --> D[Check the page at narrow and wide widths]Prefer a narrow first column for labels, short explanatory content or an image that supports a larger primary task. Avoid putting a sequence of dependent questions across columns: people should not have to scan sideways to understand what to do next.
Design for narrow displays
Split columns apply on larger screens. On a narrow display, the content returns to a single reading order. That order must make sense without relying on a side-by-side visual relationship.
Before publishing, test:
- the page at a narrow width;
- keyboard navigation through all interactive controls;
- zoomed text and long translated labels; and
- a screen-reader reading order.
Do not use columns to make a long page appear shorter. If content is too long, split it into focused pages instead.
Check the content relationship
Use columns only when the two areas genuinely help people compare related short content. Good examples include a concise explanation beside a short summary, or a label-and-value layout that remains coherent when it stacks. Do not place a question in one column and the information needed to answer it in another unless the relationship is obvious in the single-column reading order.
Before relying on the split, temporarily read the components from top to bottom. If the relationship becomes unclear without the side-by-side view, improve the headings, wording or page structure. The layout should support meaning, not create it.
Maintain the layout
Column splits affect the components that follow them, so changing a split can alter more than one part of a page. After moving, deleting or adding a split, review the complete page in Builder and User view. Check that a following row split or later layout component still starts where expected.
Use comments or page design notes to explain a non-obvious column layout. This prevents later editors from adding a new question into a column structure that was intended only for introductory content.
Test checklist
- Both columns contain short, related content.
- The reading order works when the columns stack.
- Labels, instructions and controls remain together.
- Long labels, error messages and translated text do not create an unusable layout.
- A later structural component has not accidentally inherited the column layout.