# Column split components

Source: https://govform.com/resources/documentation/article/23-11-component-column-split
Topic: Component Settings

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.

## Related guidance

-   [Row split components](<https://govform.com/resources/documentation/article/23-12-component-row-split>)
-   [Design pages and navigation](<https://govform.com/resources/documentation/article/05-design-pages-and-navigation>)
-   [Design accessible services](<https://govform.com/resources/documentation/article/14-design-accessible-services>)