This page is about version 0.10.0 of the app, which is not the most recent version. The latest stable version is 0.16.0.
The Rich Text is a block that brings texts to your store and everything else that Markdown language is able to. It converts texts written in Markdown language and displays its content as HTML elements.
For example, the text:
[Help](https://help.vtex.com/en/faq/what-is-vtex-io).\n**Be Bold!**\n*This is italic*
Is converted to:
_14<div>_14 <p>_14 <a href="https://help.vtex.com/en/faq/what-is-vtex-io">_14 Help_14 </a>_14 <br />_14 <span class="b">Be Bold!</span>_14 <br />_14 <span class="i">This is italic</span>_14 </p>_14 _14_14 </div>_14 </div>
Check the documentation of Markdown Language to understand how to use it.
Configuration
- Import the rich text's app to your theme's dependencies in the
manifest.json, for example:
_10 "dependencies": {_10 "vtex.rich-text": "0.x"_10 }
- Add
rich-textblock to your blocks files, in the place you want it to show up. For example:
_10"rich-text": {_10 "props": {_10 "textAlignment": "CENTER",_10 "textPosition": "CENTER",_10 "text": "Visit our [help](https://help.vtex.com/en/faq/what-is-vtex-io) section.\n*Be Bold!*\n**This is italic**",_10 "textColor": "c-on-emphasis",_10 "font": "t-heading-5",_10 "blockClass": "help-message"_10 }_10}
| Prop name | Type | Description |
|---|---|---|
font | String | {desktop: String, tablet: String, mobile: String} | Define the tachyon token to be used as font. Default: t-body |
textColor | String | Define the tachyon token to be used as text color. Default: c-on-base |
text | String | Text written in markdown language to be displayed |
textAlignment | TextAlignmentEnum | Control the text alignment inside component. Default: "LEFT" |
textPosition | TextPostionEnum | Choose in which position of the component text will be displayed, left, center or right. Default: "LEFT" |
blockClass | String | Unique class name to be appended to block classes. Default: '' |
Here are the possible values of TextPostionEnum
| Enum name | Enum value | Description |
|---|---|---|
| Left | 'LEFT' | Text will be to the left. If isFullModeStyle is false, image will be on the right |
| Center | 'CENTER' | Text will be in the center. Not applicable if isFullModeStyle is false. |
| Right | 'RIGHT' | Text will be to the right. If isFullModeStyle is false, image will be on the left |
Here are the possible values of TextAlignmentEnum
| Enum name | Enum value | Description |
|---|---|---|
| Left | 'LEFT' | Text alignment will be to the left. |
| Center | 'CENTER' | Text alignment will be to the center. |
| Right | 'RIGHT' | Text alignment will be to the right. |
Customization
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
| CSS Handle |
|---|
container |
heading |
headingLevel1 |
headingLevel2 |
headingLevel3 |
headingLevel4 |
headingLevel5 |
headingLevel6 |
image |
italic |
link |
list |
listItem |
listOrdered |
paragraph |
strong |
table |
tableBody |
tableHead |
tableTd |
tableTh |
tableTr |
wrapper |