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:

  1. Heading with templating
  2. Body text
  3. Subheading

Text component

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

Properties

The following Text component properties are available:

Main

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.

Styles

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

Interactions

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.

Accessibility

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