Paragraph¶

Displays a block of text with default vertical margins, so consecutive blocks space themselves apart without manual adjustment.

Text components · element type paragraph · binds through text templates

Related: Text · Rich Text · HTML

Examples¶

// Body copy
Thank you for your order. A summary follows below.

// With a value from your data
Your order {$data.order.number} shipped on {$data.order.shippedAt:date}.

Options¶

Configure the component with these options:

Option	Default	Description
Text	`Text`	The content to display. Supports text templates for dynamic data
Text Align	From theme	Horizontal alignment: left, center, or right
Vertical Align	Not set	Vertical alignment within the container: top, middle, or bottom
Whitespace	Trim whitespace	Trim whitespace collapses runs of spaces and line breaks; Preserve whitespace keeps the text exactly as entered, including indentation and blank lines

Text styling inherits from theme settings and can be overridden per component:

Option	Default	Description
Font Family	From theme	Typeface used for the text
Font Size	From theme	Accepts any CSS unit
Text Color	From theme	Picks from the theme palette or a custom colour
Font Weight	From theme	Visual emphasis
Line Height	From theme	Spacing between lines of wrapped text
Text Transform	From theme	Renders as uppercase, lowercase, or capitalized
Margin Top / Margin Bottom	From theme	Vertical spacing around the block. This is what gives Paragraph its spacing
Style	Empty	Custom CSS applied to the element, through the style editor

Notes¶

Paragraph and Text share the same options. Choose Paragraph for flowing body copy where you want that automatic spacing, and Text for a single run you position yourself. For inline formatting use Rich Text, and for raw markup HTML
If multi-line text renders as one continuous run, switch Whitespace to Preserve whitespace
{$record.…} only resolves inside a repeating scope. Outside one, use {$data.…}
To remove the built-in spacing for a single block, override Margin Top / Margin Bottom