> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.