Column Layout

A block that arranges content in configurable column layouts with predefined and custom width options

Basic Example

{
  "type": "column_layout",
  "variant": "2",
  "columns": [
    { "type": "column", "elements": [] },
    { "type": "column", "elements": [] }
  ]
}

Complete Example

Example Code

[
  {
    "type": "column_layout",
    "variant": "2-1",
    "gap": "medium",
    "columns": [
      {
        "type": "column",
        "elements": [
          {
            "type": "heading",
            "level": 3,
            "text": "Main Content"
          },
          {
            "type": "text",
            "text": "This column takes up 2/3 of the available width."
          }
        ]
      },
      {
        "type": "column",
        "elements": [
          {
            "type": "alert",
            "severity": "info",
            "text": "Sidebar content in the narrower column."
          }
        ]
      }
    ]
  }
]

Properties

type · string · required

Identifies this as a column layout block

Must be column_layout

variant · string · default: "2" · required

The predefined column width distribution

Allowed values:

Variant	Description	Column Widths
1	Single column	100%
2	Two equal columns	50% / 50%
3	Three equal columns	33% / 33% / 33%
4	Four equal columns	25% / 25% / 25% / 25%
2-1	Wide left, narrow right	66% / 33%
1-2	Narrow left, wide right	33% / 66%
3-1	Wide left, sidebar right	75% / 25%
1-3	Sidebar left, wide right	25% / 75%
1-1-2	Two narrow, one wide	25% / 25% / 50%
2-1-1	One wide, two narrow	50% / 25% / 25%

columns · array · required

Array of column objects. Each column contains an elements array with the content blocks for that column.

gap · string · default: "medium" · required

Spacing between columns

Allowed values: none, x-small (4px), small (8px), medium (16px), large (24px), x-large (32px)

margin · string · required

Outer margin around the column layout

padding · string · required

Inner padding of the column layout container

alignItems · string · default: "stretch" · required

Vertical alignment of columns

Allowed values: stretch, flex-start, center, flex-end

minHeight · string · required

Minimum height of the column layout (e.g., 200px)

Column Properties

Each column in the columns array supports:

type · string · required

Must be column

elements · array · required

Array of block elements contained within this column

width · string · required

Custom width override (e.g., 300px, 40%)

minWidth · string · required

Minimum column width

maxWidth · string · required

Maximum column width

padding · string · required

Inner padding for this column

verticalAlign · string · required

Vertical alignment of content within this column

Allowed values: top, center, bottom

Layout Patterns

Sidebar Layout (75/25)

{
  "type": "column_layout",
  "variant": "3-1",
  "columns": [
    {
      "type": "column",
      "elements": [
        { "type": "heading", "level": 2, "text": "Main Content Area" },
        { "type": "text", "text": "Primary content goes here." }
      ]
    },
    {
      "type": "column",
      "elements": [
        { "type": "alert", "severity": "info", "text": "Sidebar widget" }
      ]
    }
  ]
}

Three-Column Dashboard

{
  "type": "column_layout",
  "variant": "3",
  "gap": "large",
  "columns": [
    {
      "type": "column",
      "elements": [
        { "type": "heading", "level": 4, "text": "Panel 1" }
      ]
    },
    {
      "type": "column",
      "elements": [
        { "type": "heading", "level": 4, "text": "Panel 2" }
      ]
    },
    {
      "type": "column",
      "elements": [
        { "type": "heading", "level": 4, "text": "Panel 3" }
      ]
    }
  ]
}

Nesting Rules

Column layouts can be placed inside:

• Root level
• Section
• Wizard Step

Each column can contain any block elements including:

• Heading, Text, Alert
• Bullet List, Ordered List
• Actions, Form
• Nested Column Layout blocks

Usage Notes

• Changing the variant automatically adjusts the number of columns while preserving existing content
• Columns are responsive and will stack vertically on small screens
• Use the gap property to control spacing between columns
• Individual columns can override their width using the width property