Columns Section

A flexible multi-column section that allows custom layouts by composing different content blocks. Each column can contain multiple blocks.

Text-Image-CTA Layout

A horizontal layout combining text content, an image, and a call-to-action button.

This is different

The Power of Composable Pages

This is an example of a composed section. Rather then using a monolithic section, the composed section allows for multiple columns of content. Allowing the composition of custom layouts.

Learn More

Image Gallery Layout

A three-column image gallery created using the composed section structure.

Configuration

- sectionType: columns
  containerTag: section
  classes: 'media-image hero-cta'
  # more settings

  contentClasses: ''
  columns:
    - column:
      columnClasses: 'image'
      blocks:
        - image:
            src: '/assets/images/sample3.jpg'
            alt: 'sample image'
            caption: ''
    - column:
      columnClasses: 'text flow'
      blocks:
        - text:
            leadIn: This is different
            title: The Power of Composable Pages
            titleTag: 'h2'
            subTitle: ''
            prose: |-
              This is an example of a composed section. Rather then using a monolithic section, the composed section allows for multiple columns of content. Allowing the composition of custom layouts.

Configuration Options

Column Layout

Property	Type	Required	Description
`contentClasses`	string	No	CSS classes applied to the content wrapper
`columns`	array	Yes	Array of column definitions

Column Properties

Property	Type	Required	Description
`column.columnClasses`	string	No	CSS classes for styling individual columns
`column.blocks`	array	Yes	Array of content blocks within a column

Block Types

Block Type	Description
`text`	Text content block with leadIn, title, titleTag, subTitle, and prose
`image`	Image block with src, alt, and caption
`ctas`	Call-to-action buttons or links