# Flexible text (Flexo)

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

This tag creates a flexible text box. It will expand according to the content connected from your Data Library.

**📍 Where to add the tag:** A text layer

```
[flexo]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhsUtun_8D4Nhnad5S0%2F-MhsWWEL42A4Xu2gVrWx%2Fflexo.gif?alt=media\&token=989710ab-d8bc-423a-ac4c-526aae5a1861)

{% hint style="info" %}
**Important:**

* The \[flexo] element must be the bottom-most element of the container it is in.&#x20;
* You can only have one flexo text per container.&#x20;
* Top bar containers do not support flexo texts.
  {% endhint %}

## 🏷️ **How to add the tag** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

&#x20;   1\. **Copy & paste** the tag into the layer name of the **text box** you want to be flexible.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhsUtun_8D4Nhnad5S0%2F-MhsZCuVB_-4WDKp7X74%2Fflexo2.webp?alt=media\&token=53f54c1e-0ed6-41ab-a1d2-54515694ba2c)

&#x20;   2\. If you have anything below that text box, create a separate container.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhsUtun_8D4Nhnad5S0%2F-MhsZmeSCj46CRriv519%2Fflexo3.webp?alt=media\&token=e2537cf6-081e-4a02-b5ba-ef5f875d4719)

&#x20;   4\. Import the design file into Bravo.

&#x20;   5\. Set up your **binding** as usual, select the text box layer and match it with the data record of the text content. You can use the example request below to get sample data.

**Example data**: <https://example-data.draftbit.com/product_reviews?_limit=5>

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% @figma/embed fileId="dedkxpF23DnniDkjZnqehd" nodeId="226:0" url="<https://www.figma.com/file/dedkxpF23DnniDkjZnqehd/Bravo-Sample%3A-Bravo-Tags?node-id=226%3A0>" %}
