Dynamic Text
The Dynamic Text element is a rich content block with two independently styled zones — a Header and a Body — inside a shared container. Both zones support runtime expressions, so you can inject live values into the displayed text.
Use it for personalised messages, formatted instructions, or summary panels.
Every element has a Component ID.
Expressions
Header and Body templates resolve direct lookups inline — $.self.*, $.form.*, $.state.*, $.variable.*, and $.image.*. For computed values or helpers, wrap an expression in {{ }} — for example {{ $sum('line_total') }}. See the Scripts reference.
Header
| Property | Description |
|---|---|
| Header Template | The header text, including any expressions |
| Preset | Typography preset — Heading 1–6, Subtitle 1/2, Body 1/2, Caption, or Overline |
| Weight | Thin, Light, Regular, Medium, Bold, or Bolder |
| Align | Left, Center, Right, or Justify |
| Formatting | Multi-select — Italic, Underline, Uppercase, Lowercase, Capitalize, No Wrap |
| Text Color / Background | Zone colours (theme colours) |
| Padding | None, Extra Small, Small, Medium, Large, or Extra Large |
| Border | None, Top, Bottom, or Full; when set, exposes Thickness (1–10 px), Radius (0–32 px), and Border Color |
Body
The Body has the same controls as the Header (Preset, Weight, Align, Formatting, Text Color, Background, Padding, Border), plus:
| Property | Description |
|---|---|
| Body Template | The body text, including any expressions (newlines are preserved) |
| Line Height | Slider, 0.8–3 |
| Letter Spacing | Slider, −2 to 10 px |
Block Container
| Property | Description |
|---|---|
| Opacity | Overall block opacity — slider, 0–100% |
It also shows the shared Appearance controls: Background color, Lift on hover, Shadow Elevation, and Border & Shape.
Layout
Column width, margins, and padding work the same as every element — see Common Properties › Layout.
Rules
Conditional visibility — Dynamic Text has no validation.
See also: Elements overview · Common Properties