Column control

Visitors read horizontally on desktop when two topics belong together (for example image plus copy, or compare blocks). Content authors pick a layout preset (such as half and half or uneven splits), then place components in each column. Visual designers use separators and gutters to keep columns distinct without crowding.

• Layout choice sets how many columns appear and their relative widths.
• Edit mode uses special paragraph controls so authors can start, break, and end the column row predictably.
• On narrow viewports, columns stack according to foundation CSS.

1. Column control start opens the row.
2. Column breaks separate columns (foundation behaviour).
3. Column control end closes the row.
4. Each column holds a nested parsys for arbitrary components.

Replace with two- and three-column examples.

• Choose a layout that matches how authors will fill columns (equal pairs versus uneven splits).
• Use vertical separators only when columns need a stronger visual split.

Do

• Prefer Tiles or Card deck when the design is explicitly a tile or card grid.
• Test stacking on mobile; column controls rely on foundation and CSS for small screens.

Don't

• Don't nest many column controls; it hurts authoring clarity and keyboard order.

• Side-by-side content that must stay in one row on desktop (for example text + image, two cards).
• Multi-column lists or tiles when Tiles or other wrappers are not a fit.

• Responsive card grids that should reflow as a single grid; consider Card deck or Tiles.
• Navigation columns; use Column control only for main content layout.