Text Columns

Usage

Text Columns flows content across native CSS columns — like a newspaper or magazine layout — rather than placing separate blocks in side-by-side containers. Use it for long paragraphs, editorial copy, bios, or any text that reads well in a multi-column flow.

The block inserts with a heading and two sample paragraphs. Replace the placeholder content with your own headings, paragraphs, lists, images, buttons, separators, or Spacer blocks.

Unlike the Columns block, Text Columns does not split content into left and right panels. Inner blocks flow in document order and wrap automatically from one column to the next.

Columns

Sidebar control under Block Settings:

• Columns — Two (default) or Three

Responsive behavior

• Below 640px — content displays in a single column
• 640px and up — Two uses two columns; Three uses two columns
• 1024px and up — Three expands to three columns

Columns are separated by a 2rem gap. Paragraphs and figures avoid breaking across columns when possible.

Allowed content

You can add these blocks inside Text Columns:

• Heading, Paragraph, List, Image, Button, Separator
• Spacer — useful for adding vertical space within a column flow

Other Dirigible blocks are not allowed in this container. For side-by-side layouts with mixed block types, use Columns instead.

Block width

Text Columns supports Wide and Full alignment from the block toolbar and defaults to Wide width. Wider alignment gives multi-column layouts more room to breathe on large screens.

Tips

• Use Two for editorial body copy; Three works well for shorter snippets, feature lists, or dense reference text on wide pages.
• Keep paragraphs reasonably sized — very long unbroken paragraphs can create uneven column heights.
• Place images inside the flow when they should sit within the column layout; use Columns when image and text need independent alignment in separate panels.
• Add a Spacer between sections if you need deliberate vertical separation within the column flow.