# Rich text

A type of content field or editor that allows users to format text with various styles and elements beyond plain text. A rich text editor typically includes options such as bold, italic, underline, bullet points, numbered lists, hyperlinks, and sometimes more advanced formatting options like tables or images.&#x20;

## :point\_right: The tags

Display text with Markdown or HTML styling. Useful for APIs that send text styling.

**📍 Where to add the tag:** Inside a container frame in a Text layer (3rd level)

### **Markdown**

Text with Markdown styling

```
[component:text:md]
```

### **HTML**

Text with HTML styling.

```
[component:text:html]
```

```
<a>
<b>
<big>
<blockquote>
<br>
<cite>
<div>
<em>
<font>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<li>
<p>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<u>
<ul>
and attributes: size, color
```

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fgiepa87JKTCBFKC2pgFy%2FRich%20text1.jpg?alt=media&#x26;token=62c9b2dc-2bbc-40c3-ac3d-3f77d6663e43" alt=""><figcaption></figcaption></figure>

## Binding with your API

1. Ensure your [GET API request](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable) is properly set up.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FlOPI286p3Jzt9to5vAMr%2FRich%20text2.jpg?alt=media&#x26;token=ad209eff-9842-4876-abd7-c3dbcb297449" alt=""><figcaption></figcaption></figure>

2. Choose the screen where the markdown or html tag was added.
3. In the **Elements** section, select the **text element**, you want to bind. For this example, choose the Title.
4. In the **Element binding** section located on the right side, notice the active "**Text**" binding. Here, choose the relevant API collection followed by the API request, which is typically a GET request. Then, select the "Items\[0]Name" data to be used.
5. You're now set! Try and test your app with [Bravo Vision](https://docs.bravostudio.app/good-to-know/faq/bravo-vision)! :tada:

## :floppy\_disk: Example design file

{% embed url="<https://www.figma.com/community/file/981941729280829940>" %}

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the [community](https://community.bravostudio.app/home).


---

# Agent Instructions: 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:

```
GET https://docs.bravostudio.app/bravo-tags/components/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
