> For the complete documentation index, see [llms.txt](https://docs.nighty.one/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nighty.one/ui-scripting/api-reference/ui-elements/text.md).

# Text

## <mark style="color:green;">class</mark> **UI.Text**

<figure><img src="/files/FjP1q22d6TtTv8kizEv9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**All attributes are read/write**: You can access (read) and modify (set) any attribute at any time, and the changes will immediately reflect in the UI.
{% endhint %}

```python
# Appending text to a card
text = card.create_ui_element(UI.Text,
    content="Hello, World!",
    size="sm",
    weight="bold",
    color="#FFFFFF",
    align="left"
)

# Appending text to a card, leaving the default settings
text = card.create_ui_element(UI.Text)

# Setting attributes
text.content = "Hello, World"
```

<table><thead><tr><th width="334">Attribute</th><th>Value</th></tr></thead><tbody><tr><td>content</td><td><p>any <code>string</code><br></p><p>Note: use <code>\n</code> to create a new line.</p></td></tr><tr><td>size</td><td><p><code>"tiny"</code></p><p><code>"sm"</code></p><p><code>"base"</code></p><p><code>"lg"</code></p><p><code>"xl"</code></p><p><code>"2xl"</code><br><br>Default: <code>"base"</code></p></td></tr><tr><td>weight</td><td><p><code>"thin"</code></p><p><code>"light"</code></p><p><code>"normal"</code></p><p><code>"medium"</code></p><p><code>"bold"</code></p><p><code>"extrabold"</code><br><code>"black"</code><br><br>Default: <code>"normal"</code></p></td></tr><tr><td>color</td><td><p>Any CSS valid color value.</p><p></p><p>See: <a href="https://www.w3schools.com/cssref/css_colors_legal.php">CSS Color Values</a></p><p><br>Examples:<br><code>"#FFFFFF"</code><br><code>"black"</code><br><code>"rgb(255, 0, 0)"</code><br><code>"hsla(0, 100%, 50%, 0.5)"</code></p><p><br>Default: <code>"#FFFFFF"</code></p></td></tr><tr><td>align</td><td><p><code>"left"</code></p><p><code>"center"</code></p><p><code>"right"</code><br><br>Default: <code>"left"</code></p></td></tr><tr><td>margin</td><td>See <a href="/pages/DTBGfFducdgJJ6exaVF7#margin">Margin</a>.<br><br>Default: <code>"m-0"</code></td></tr><tr><td>visible</td><td>See <a href="/pages/DTBGfFducdgJJ6exaVF7#visible">Visible</a>.<br><br>Default: <code>True</code></td></tr></tbody></table>
