📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.
The Rich Text block converts texts written in Markdown to HTML and displays them in your storefront.
For example, the text [Help](https://developers.vtex.com/).\n**Be Bold!**\n*This is italic* is converted to:
<div>
<p>
<a href="https://developers.vtex.com/">
Help
</a>
<br />
<span class="b">Be Bold!</span>
<br />
<span class="i">This is italic</span>
</p>
</div>
</div>For more information, please refer to the Markdown documentation.
- Import the rich text app to your theme dependencies in the
manifest.jsonas in the following example:
"dependencies": {
"vtex.rich-text": "0.x"
}- Add the
rich-textblock to your block files in the desired template position. For example:
"rich-text": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Visit our [help](https://developers.vtex.com/) section.\n**Be Bold!**\n*This is italic*",
"textColor": "c-on-emphasis",
"font": "t-heading-5",
"blockClass": "help-message"
}
}| Prop name | Type | Description |
|---|---|---|
blockClass |
string |
Unique class name to be appended to block classes. Default: '' |
font |
string |
Tachyon token to be used as a font. Default: t-body. |
htmlId |
String |
HTML ID of the element. |
textColor |
string |
Tachyon token to be used as text color. Default: c-on-base. |
text |
string |
Text written in Markdown language to be displayed. |
textAlignment |
TextAlignmentEnum |
Text alignment inside the component. Default: "LEFT". |
textPosition |
TextPostionEnum |
Text position in relation to the component. Default: "LEFT". |
TextPostionEnumpossible values
| Enum name | Enum value | Description |
|---|---|---|
| Left | 'LEFT' | The text will be on the left. If isFullModeStyle is false, the image will be on the right. |
| Center | 'CENTER' | The text will be in the center. Not applicable if isFullModeStyle is false. |
| Right | 'RIGHT' | The text will be on the right. If isFullModeStyle is false, the image will be on the left. |
TextAlignmentEnumpossible values
| 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. |
To apply CSS customizations to this and other blocks, please follow the Using CSS handles for store customization guide.
| 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 |
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!