Text

The Text component allows App Studio users to enter any text in their app and end-users of the app to see the displayed text.

Example

You can use the Text component to create headings and subheadings in your app:

Text component

Note: The Text component follows the WCAG 2.0 AA accessibility guidelines.

The following Text component properties are available:

The following table describes the main properties of the component.

Property	Description	Required
Component ID	Enter a unique name for the component. See Templating in components for more details.	Yes
Text	Enter the text you want to display. You can use templating.	No

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

The following table describes the styles properties of the component.

Property	Description	Required
Variant	Select the appearance from the drop-down menu.	No
Font size	Select the font size from the drop-down menu.	No
Font weight	Select the font weight from the drop-down menu.	No
Text align	Select the text alignment to the canvas from the drop-down menu.	No
Color	Select the colour according to the text function from the drop-down menu.	No

The following table describes the interactions properties of the component.

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No

Note: See Add rules to trigger properties for more information on setting rules for these properties.

The following table describes the accessibility properties of the component.

Property	Description	Required
Title	Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app.	No