Text

Display paragraphs and headings and style them with size, colors and more

Text components are used for:

• Adding a header to an Application
• Adding a subheader for other components like Tables, Forms, Charts or sections
• Writing full paragraph descriptions and instructions

Using HTML within a Text component

Use HTML for formatting the Text component.

<h1 style="font-size:60px;color:green">{{SalesData.response.customers}}<em style="font-size:25px">(+{{SalesData.response.new_customers}})</em></h1>

Text Properties

Component Properties

Property	Description
Text	Set the text to be displayed
Text Type	Change to Plain Text, Number, Currency, or Date
Text Style	Changes the style (font, size, etc.) of the text. Configure styles in the Typography settings
Text Color	Changes the color of the text
Icon	Select an icon
Icon Position	Sets the alignment of the icon
Text Color	Set the color using the color picker or hex value
Text Align	Left, center or right alignment
Vertical Align	Top, Middle or Bottom alignment
Visible	Set true to show and false to hide. Set dynamically using JavaScript with {{}}
Scroll Contents	Enable scrollability within the text component for long strings

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Text component, and dot referencing the property. For a Text component named Text1:

Property	Description
Text1.text	The string of the text component
Text1.isVisible	Returns the boolean value of the component's visibility (True, if it is visible)