Skip to main content

​
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 blockMust be column_layout
​
variant
string
default:"2"
required
The predefined column width distributionAllowed values:
VariantDescriptionColumn Widths
1Single column100%
2Two equal columns50% / 50%
3Three equal columns33% / 33% / 33%
4Four equal columns25% / 25% / 25% / 25%
2-1Wide left, narrow right66% / 33%
1-2Narrow left, wide right33% / 66%
3-1Wide left, sidebar right75% / 25%
1-3Sidebar left, wide right25% / 75%
1-1-2Two narrow, one wide25% / 25% / 50%
2-1-1One wide, two narrow50% / 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 columnsAllowed 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 columnsAllowed 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 columnAllowed values: top, center, bottom

​
Layout Patterns

{
  "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: Each column can contain any block elements including:

​
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