> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/text-component.md).

# Free text component

Use Free text for headings, short instructions, and helper content.

Add a **Free text** component to provide information, guidance, and page structure.

## **Add a Free text component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open the **Add** tab.
{% endstep %}

{% step %}
**Add Free text**

Under **Basic components**, drag **Free text** onto the page.
{% endstep %}

{% step %}
**Label the component**

Enter a name in **Label**. Ninox generates the **Internal name** automatically. Update both values if needed.
{% endstep %}

{% step %}
**Configure the Free text component**

Under **Display**:

* Choose a **Quick style** and set **Color**.
* Select **Custom** to define the text component's complete appearance.
  {% endstep %}

{% step %}
**Review the result**

Check that the text looks as expected. Adjust it if needed.
{% endstep %}
{% endstepper %}

## **Free text component settings**

Under **Settings**, you can configure the component details:

* **Label**: the title shown on the component.
* **Internal name**: filled automatically. Change it only when needed. Use the **Internal name** in scripts, not the **Label**.

Under **General**, configure the text that the component displays:

* **Content**: enter the text to display. You can also edit the text directly in the component. Click <i class="fa-code-simple">:code-simple:</i> to define the content with logic.

Under **Display**, configure how the text is displayed on the page:

* **Quick style**: offers ready-made styles for quick formatting. Choose **Title L**, **Title M**, **Title S**, **Body M**, or **Body S**. Choose **Custom** to define every display detail yourself.
* **Color**: sets the text color. This setting is available for every Quick style.

With **Custom**, configure the complete appearance:

<figure><img src="https://3739718108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYwCp7NT87JGgngrkhfHT%2Fuploads%2FFQ9wXEi4DP198iXyx2Y6%2FPages_Free%20text_Quick%20style_Custom.png?alt=media&amp;token=b644237e-e106-4d62-9051-845591ae5371" alt=""><figcaption></figcaption></figure>

* **Typography**: sets the font size, font weight, horizontal and vertical alignment, and font style.
* **Background**: sets the background style for the component. Choose **Custom** to define the background with **Custom CSS**.
* **Border**: adds an outline around the component. Choose its style and color.
* **Padding**: adds space between the text and each component edge.
* **Drop shadow**: adds depth around the component. Choose a size to control the shadow's intensity.

{% hint style="info" %}
For **Content** and settings under **Custom**, you can set logic instead of choosing a predefined option. Click <i class="fa-code-simple">:code-simple:</i>.
{% endhint %}

Under **Visibility**, choose how the component is shown on the page:

* **Visible**: shows the component on the page.
* **Hidden**: hides the component on the page.
* **Conditional**: defines a **Visibility condition** that controls when the component is shown or hidden.

  Use **Conditional** when the component should appear only in specific cases.

  Build the condition based on user roles, **Tables**, or **Fields**.

  This only affects what is shown on the page. It does not change records or permissions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/text-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.