Frame

An atomic box around a single child, which it centres. A frame will never split across pages — if it doesn’t fit on the current page it moves in full to the next. Use it for callout boxes, cards, and labelled regions. To put several elements in a frame, wrap them in a stack. A frame takes no gap, align or justify, and a second child is an error.

To allow contents to flow across pages, use stack with padding and background instead.

Attributes

Attribute	Type	Default	Description
padding	spacing	—	Inner padding: 16pt or shorthand "16pt 12pt"
background	color	—	Background color
border	string	—	Border: "s #cccccc" or "1pt #cccccc"
radius	token/pt	—	Corner radius
height	pt/fill/full	—	Fixed height
width	token/pt	—	Constrain width
font	string	inherit	Font name
font-size	token/pt	inherit	Font size
data-if	string	—	Render only when value is truthy
data-if-not	string	—	Render only when value is falsy

Callout box

XML

<frame padding="m" background="#fff8e1" border="s #f9a825" radius="s">
  <stack gap="4pt">
    <text font-size="s">Note</text>
    <text font-size="xs">This is an important callout.</text>
  </stack>
</frame>

Node.js

L.frame({ padding: 'm', background: '#fff8e1', border: 's #f9a825', radius: 's' }, [
    L.stack({ gap: '4pt' }, [
        L.text({ fontSize: 's' }, ['Note']),
        L.text({ fontSize: 'xs' }, ['This is an important callout.']),
    ]),
])

Python

L.frame(FrameAttr(padding='m', background='#fff8e1', border='s #f9a825', radius='s'), [
    L.stack(StackAttr(gap='4pt'), [
        L.text(TextAttr(font_size='s'), ['Note']),
        L.text(TextAttr(font_size='xs'), ['This is an important callout.'])
    ])
])

PHP

L::frame(new FrameAttr(padding: 'm', background: '#fff8e1', border: 's #f9a825', radius: 's'), [
    L::stack(new StackAttr(gap: '4pt'), [
        L::text(new TextAttr(fontSize: 's'), ['Note']),
        L::text(new TextAttr(fontSize: 'xs'), ['This is an important callout.']),
    ]),
])

.NET

L.Frame(new() { Padding = "m", Background = "#fff8e1", Border = "s #f9a825", Radius = "s" }, [
    L.Stack(new() { Gap = "4pt" }, [
        L.Text(new() { FontSize = "s" }, ["Note"]),
        L.Text(new() { FontSize = "xs" }, ["This is an important callout."]),
    ]),
])

Conditional frame

<!-- shown only when customer.isPremium is truthy -->
<frame data-if="customer.isPremium" padding="xs" background="#ffd700" radius="xs">
  <text align="center" font-size="xs">★ Premium Customer</text>
</frame>

<!-- shown only when customer.isPremium is falsy -->
<frame data-if-not="customer.isPremium" padding="xs" background="#f0f0f0" radius="xs">
  <text align="center" font-size="xs">Standard Customer</text>
</frame>

Fixed-height placeholder

XML

<frame height="120pt" border="xs #e0e0e0">
  <text align="center" color="#aaaaaa">Signature</text>
</frame>

Node.js

L.frame({ height: '120pt', border: 'xs #e0e0e0' }, [
    L.text({ align: 'center', color: '#aaaaaa' }, ['Signature']),
])

Python

L.frame(FrameAttr(height='120pt', border='xs #e0e0e0'), [
    L.text(TextAttr(align='center', color='#aaaaaa'), ['Signature'])
])

PHP

L::frame(new FrameAttr(height: '120pt', border: 'xs #e0e0e0'), [
    L::text(new TextAttr(align: 'center', color: '#aaaaaa'), ['Signature']),
])

.NET

L.Frame(new() { Height = "120pt", Border = "xs #e0e0e0" }, [
    L.Text(new() { Align = "center", Color = "#aaaaaa" }, ["Signature"]),
])