Column

Places children top to bottom with a configurable gap. By default each child fills the available width. A column can split across pages between its children.

Attributes

Attribute	Type	Default	Description
gap	token/pt	—	Space between children: xs s m l xl xxl or 12pt
align	string	stretch	Cross-axis alignment: start center end stretch
justify	string	start	Main-axis distribution: start center end between
width	token/pt/fill	—	Fixed width, or fill: the full width, and in a row the width the other children leave
padding	spacing	—	Inner padding: 16pt or shorthand "16pt 12pt"
background	color or gradient:name	—	Background: a color, or a gradient that spans the box
border	string	—	Border: "s #cccccc" or "1pt #cccccc"
radius	token/pt	—	Corner radius
color	color	inherit	Color of the text inside. A text that sets none takes the nearest box’s. See Text color in a box
opacity	0–1	1	How opaque the box and everything in it is, as one. See Opacity
shadow	string	—	A hard-edged shadow under the box: "x y color", with an optional opacity. See Shadow
height	pt/fill/full	—	Fixed height, fill remaining space, or full page height
paginate	string	—	Page breaks: no break-before break-after keep-next. See Page breaks
font	string	inherit	Font name (declared in assets)
font-size	token/pt	inherit	Font size for all children
data-source	string	—	Dot-path to array — repeats this element per item
data-if	string	—	Render only when value is truthy
data-if-not	string	—	Render only when value is falsy

Basic example

XML

<column gap="16pt">
  <text font-size="18pt">Title</text>
  <divider/>
  <text>Body text.</text>
</column>

Node.js

L.column({ gap: '16pt' }, [
    L.text({ fontSize: '18pt' }, ['Title']),
    L.divider(NoAttr),
    L.text(NoAttr, ['Body text.']),
])

Python

L.column(ColumnAttr(gap='16pt'), [
    L.text(TextAttr(font_size='18pt'), ['Title']),
    L.divider(NoAttr),
    L.text(NoAttr, ['Body text.'])
])

PHP

L::column(new ColumnAttr(gap: '16pt'), [
    L::text(new TextAttr(fontSize: '18pt'), ['Title']),
    L::divider(NoAttr),
    L::text(NoAttr, ['Body text.']),
])

.NET

L.Column(new() { Gap = "16pt" }, [
    L.Text(new() { FontSize = "18pt" }, ["Title"]),
    L.Divider(NoAttr),
    L.Text(NoAttr, ["Body text."]),
])

Centered content

XML

<column gap="12pt" align="center">
  <text>Centered item</text>
  <text>Also centered</text>
</column>

Node.js

L.column({ gap: '12pt', align: 'center' }, [
    L.text(NoAttr, ['Centered item']),
    L.text(NoAttr, ['Also centered']),
])

Python

L.column(ColumnAttr(gap='12pt', align='center'), [
    L.text(NoAttr, ['Centered item']),
    L.text(NoAttr, ['Also centered'])
])

PHP

L::column(new ColumnAttr(gap: '12pt', align: 'center'), [
    L::text(NoAttr, ['Centered item']),
    L::text(NoAttr, ['Also centered']),
])

.NET

L.Column(new() { Gap = "12pt", Align = "center" }, [
    L.Text(NoAttr, ["Centered item"]),
    L.Text(NoAttr, ["Also centered"]),
])

Space between (like flex justify-content: space-between)

XML

<column justify="between" height="full">
  <text>Top</text>
  <text>Bottom</text>
</column>

Node.js

L.column({ justify: 'between', height: 'full' }, [
    L.text(NoAttr, ['Top']),
    L.text(NoAttr, ['Bottom']),
])

Python

L.column(ColumnAttr(justify='between', height='full'), [
    L.text(NoAttr, ['Top']),
    L.text(NoAttr, ['Bottom'])
])

PHP

L::column(new ColumnAttr(justify: 'between', height: 'full'), [
    L::text(NoAttr, ['Top']),
    L::text(NoAttr, ['Bottom']),
])

.NET

L.Column(new() { Justify = "between", Height = "full" }, [
    L.Text(NoAttr, ["Top"]),
    L.Text(NoAttr, ["Bottom"]),
])

Card with background and border

XML

<column gap="8pt" padding="m" background="#f8f9fa" border="xs #e0e0e0" radius="s">
  <text font-size="s">Card title</text>
  <text font-size="xs" color="#666666">Supporting text.</text>
</column>

Node.js

L.column({ gap: '8pt', padding: 'm', background: '#f8f9fa', border: 'xs #e0e0e0', radius: 's' }, [
    L.text({ fontSize: 's' }, ['Card title']),
    L.text({ fontSize: 'xs', color: '#666666' }, ['Supporting text.']),
])

Python

L.column(ColumnAttr(gap='8pt', padding='m', background='#f8f9fa', border='xs #e0e0e0', radius='s'), [
    L.text(TextAttr(font_size='s'), ['Card title']),
    L.text(TextAttr(font_size='xs', color='#666666'), ['Supporting text.'])
])

PHP

L::column(new ColumnAttr(gap: '8pt', padding: 'm', background: '#f8f9fa', border: 'xs #e0e0e0', radius: 's'), [
    L::text(new TextAttr(fontSize: 's'), ['Card title']),
    L::text(new TextAttr(fontSize: 'xs', color: '#666666'), ['Supporting text.']),
])

.NET

L.Column(new() { Gap = "8pt", Padding = "m", Background = "#f8f9fa", Border = "xs #e0e0e0", Radius = "s" }, [
    L.Text(new() { FontSize = "s" }, ["Card title"]),
    L.Text(new() { FontSize = "xs", Color = "#666666" }, ["Supporting text."]),
])