Column - EXPRESSO Docs

column lays out children vertically. Use spacing in the style for consistent gaps between children.

Properties

Property	Accepted value	Description
`style`	`StyleProperties`	Layout, appearance, and transform values.
`children`	`ReactNode`	Child nodes rendered vertically.
`key`	`string \| number`	React key for dynamic children.
`class`	`string`	Registered style name for this node only.

column has no node-specific properties. On a column, verticalAlignment positions the child group along the column’s height and horizontalAlignment aligns each child across its width. spacing adds vertical gaps. See How layout alignment works.

Example

<column style={{ padding: 16, spacing: 12 }}>
  <text style={{ fontSize: 22, fontWeight: 700 }}>
    Order summary
  </text>
  <text style={{ color: "#667085" }}>
    Review your items before checkout.
  </text>
  <button text="Continue" variant="primary" />
</column>

Use weight on a child when it should consume remaining space in the column.