> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

> Display and format text content with rich styling options in UI Studio applications

The Text component of UI Studio lets you create formatted text that displays on your UI Studio pages. Use text components to add headings, paragraphs, instructions, labels, or any textual content. The text in the component can be configured to display in various formats such as italic, underline, specific text alignment, and custom styling.

## Basic usage

Add a text component to your UI Studio page to display content.

<Frame caption="Basic Text component">
  <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/ui-studio-text-example.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=e90a3b4fc700697c7aea0dcef55cc50e" alt="Basic Text component" width="400" height="176" data-path="assets/images/lw-platform/ui-studio/ui-studio-text-example.png" />
</Frame>

Enter your text content and apply formatting to create visually appealing, readable content.

## Best practices

* Format similar items consistently. For example, if you bold important terms in one text component, use the same format for all important terms.

* Limit the number of fonts and font sizes on a specific UI Studio page. Use a font type that reflects your organization's design. For font size, select one for all headings, another for body text, and another for footnotes and other small text.

* Avoid using multiple emphasis styles on the same text. For example, choose just bold, but do not underline or italicize the same text as well.

## Configuration properties

### Basic properties

<ParamField path="Text" type="string">
  The text content to display. Supports rich text formatting when Font options are applied. Text line length is 50-75 characters for optimal readability, but use 35-50 characters for mobile devices.
</ParamField>

<ParamField path="Font" type="group">
  Typography settings for the text.

  <Expandable title="Properties">
    <ParamField path="Family" type="dropdown" default="Public Sans">
      Font typeface for the text.
    </ParamField>

    <ParamField path="Weight" type="dropdown" default="Regular">
      Font weight for the text. Options are Regular, Light, Bold, and Extra Bold.
    </ParamField>

    <ParamField path="Size" type="number" default="14">
      Font size in pixels.

      Recommended ranges:

      * Body text: 14-16px.
      * Headings: 18-32px.
      * Small text: 12-13px.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Italic" type="boolean">
  When enabled, the text is italicized.
</ParamField>

<ParamField path="Underline" type="boolean">
  When enabled, the text is underlined.
</ParamField>

<ParamField path="Text Alignment" type="option">
  How the text is aligned in the text field. Options are Left, Center, or Right.
</ParamField>

<ParamField path="Colors" type="group">
  Color settings for the text.

  <Expandable title="Properties">
    <ParamField path="Font Color" type="color" default="#2C3136">
      Text color for the component.

      <Color variant="compact">
        <Color.Item name="default" value="#2C3136" />
      </Color>
    </ParamField>
  </Expandable>
</ParamField>

### Advanced properties

<ParamField path="Padding Top" type="integer">
  The amount of whitespace at the top of the text field in pixels.
</ParamField>

<ParamField path="Padding Left" type="integer">
  The amount of whitespace on the left edge of the text field in pixels.
</ParamField>