Rich text

Display the same text style as the content you get from an API

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.

👉 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

Binding with your API

1. Ensure your GET API request is properly set up.

1. Choose the screen where the markdown or html tag was added.

2. In the Elements section, select the text element, you want to bind. For this example, choose the Title.

3. 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.

4. You're now set! Try and test your app with Bravo Vision! 🎉

💾 Example design file

Bravo Sample: Rich Text | FigmaFigma

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.