Split

Two children side by side. By default each keeps its own width, the first at the left edge and the second at the right. Set equal="true" and they take half the width each. Any further children are ignored. A split never splits across pages.

For three or more columns, use grid. For explicit column widths, use table.

Attributes

Attribute	Type	Default	Description
align	string	start	Vertical alignment of the two children: start center end
equal	boolean	false	false: each child keeps its own width, pushed to opposite edges. true: the two children take half the width each
gap	token/pt	—	Gap between the two children; the minimum gap when equal is false
width	token/pt	—	Constrain total width
padding	spacing	—	Inner padding
background	color	—	Background color
border	string	—	Border
radius	token/pt	—	Corner radius
font	string	inherit	Font name
font-size	token/pt	inherit	Font size

Two equal columns

XML

<split equal="true" gap="24pt">
  <stack gap="8pt">
    <text font-size="s">Bill To</text>
    <text>Acme Inc</text>
    <text>123 Main St</text>
  </stack>
  <stack gap="8pt">
    <text font-size="s">Ship To</text>
    <text>Acme Inc</text>
    <text>456 Depot Ave</text>
  </stack>
</split>

Node.js

L.split({ equal: 'true', gap: '24pt' }, [
    L.stack({ gap: '8pt' }, [
        L.text({ fontSize: 's' }, ['Bill To']),
        L.text(NoAttr, ['Acme Inc']),
        L.text(NoAttr, ['123 Main St']),
    ]),
    L.stack({ gap: '8pt' }, [
        L.text({ fontSize: 's' }, ['Ship To']),
        L.text(NoAttr, ['Acme Inc']),
        L.text(NoAttr, ['456 Depot Ave']),
    ]),
])

Python

L.split(SplitAttr(equal='true', gap='24pt'), [
    L.stack(StackAttr(gap='8pt'), [
        L.text(TextAttr(font_size='s'), ['Bill To']),
        L.text(NoAttr, ['Acme Inc']),
        L.text(NoAttr, ['123 Main St'])
    ]),
    L.stack(StackAttr(gap='8pt'), [
        L.text(TextAttr(font_size='s'), ['Ship To']),
        L.text(NoAttr, ['Acme Inc']),
        L.text(NoAttr, ['456 Depot Ave'])
    ])
])

PHP

L::split(new SplitAttr(equal: 'true', gap: '24pt'), [
    L::stack(new StackAttr(gap: '8pt'), [
        L::text(new TextAttr(fontSize: 's'), ['Bill To']),
        L::text(NoAttr, ['Acme Inc']),
        L::text(NoAttr, ['123 Main St']),
    ]),
    L::stack(new StackAttr(gap: '8pt'), [
        L::text(new TextAttr(fontSize: 's'), ['Ship To']),
        L::text(NoAttr, ['Acme Inc']),
        L::text(NoAttr, ['456 Depot Ave']),
    ]),
])

.NET

L.Split(new() { Equal = "true", Gap = "24pt" }, [
    L.Stack(new() { Gap = "8pt" }, [
        L.Text(new() { FontSize = "s" }, ["Bill To"]),
        L.Text(NoAttr, ["Acme Inc"]),
        L.Text(NoAttr, ["123 Main St"]),
    ]),
    L.Stack(new() { Gap = "8pt" }, [
        L.Text(new() { FontSize = "s" }, ["Ship To"]),
        L.Text(NoAttr, ["Acme Inc"]),
        L.Text(NoAttr, ["456 Depot Ave"]),
    ]),
])

Opposite edges

XML

<split align="center">
  <text font-size="20pt">Invoice</text>
  <text color="#888888">2026-05-04</text>
</split>

Node.js

L.split({ align: 'center' }, [
    L.text({ fontSize: '20pt' }, ['Invoice']),
    L.text({ color: '#888888' }, ['2026-05-04']),
])

Python

L.split(SplitAttr(align='center'), [
    L.text(TextAttr(font_size='20pt'), ['Invoice']),
    L.text(TextAttr(color='#888888'), ['2026-05-04'])
])

PHP

L::split(new SplitAttr(align: 'center'), [
    L::text(new TextAttr(fontSize: '20pt'), ['Invoice']),
    L::text(new TextAttr(color: '#888888'), ['2026-05-04']),
])

.NET

L.Split(new() { Align = "center" }, [
    L.Text(new() { FontSize = "20pt" }, ["Invoice"]),
    L.Text(new() { Color = "#888888" }, ["2026-05-04"]),
])