Text Display
The Text Display element is a rich content block with two independently styled sections — a header and a body — plus container-level styling. It supports dynamic expressions to inject runtime values into the displayed text.
Use it for personalised messages, formatted instructions, summary panels, or any display content that needs fine-grained typographic control.
Dynamic content
Text fields support $.self.<field> expressions to inject runtime values. For example, Hello $.self.name renders the current user's name inline.
Header properties
| Property | Type | Description |
|---|---|---|
headerText | string | Header text content |
headerPreset | string | Typography preset — see Typography presets |
headerWeight | string | Font weight — e.g. text-weight-regular, text-weight-bold |
headerColor | string (CSS) | Text colour |
headerAlign | string | text-left, text-center, text-right, text-justify |
headerFormatting | array | Style flags — italic, underline, etc. |
headerBgcolor | string (CSS) | Header section background colour |
headerPadding | string | Inner padding — spacing tokens (none, xs, sm, md, lg, xl) |
headerBorder | string | Border placement — none, top, bottom, all, etc. |
headerBorderColor | string (CSS) | Border colour |
headerBorderSize | number (px) | Border thickness |
headerBorderRadius | number (px) | Header section corner rounding |
Body properties
| Property | Type | Description |
|---|---|---|
bodyText | string | Body text content |
bodyPreset | string | Typography preset |
bodyWeight | string | Font weight |
bodyColor | string (CSS) | Text colour |
bodyAlign | string | Text alignment |
bodyFormatting | array | Style flags |
bodyLineHeight | number | Line height multiplier (e.g. 1.5) |
bodyLetterSpacing | number (em) | Letter spacing |
bodyBgcolor | string (CSS) | Body section background colour |
bodyPadding | string | Inner padding |
bodyBorder | string | Border placement |
bodyBorderColor | string (CSS) | Border colour |
bodyBorderSize | number (px) | Border thickness |
bodyBorderRadius | number (px) | Body section corner rounding |
Container properties
| Property | Type | Description |
|---|---|---|
bgcolor | string (CSS) | Overall container background colour |
bordercolor | string (CSS) | Container border colour |
borderSize | number (px) | Container border thickness |
borderRadius | number (px) | Container corner rounding |
outlined | boolean | Apply an outline style to the container |
Plus shared layout properties.
Typography presets
| Value | Style |
|---|---|
text-h1 … text-h6 | Heading levels 1–6 |
text-subtitle1 / text-subtitle2 | Subtitle styles |
text-body1 / text-body2 | Body text |
text-caption | Small caption text |
text-overline | Small uppercase label |
See also: Elements overview