VTEX Developer Portal

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.

imageimage

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:

<div>
      <p>
        <a href="https://help.vtex.com/en/faq/what-is-vtex-io">
         Help
        </a>
        <br />
        <span class="b">Be Bold!</span>
        <br />
        <span class="i">This is italic</span>
      </p>
      

    </div>
  </div>

Check the documentation of Markdown Language to understand how to use it.

Configuration

  1. Import the rich text's app to your theme's dependencies in the manifest.json, for example:
  "dependencies": {
    "vtex.rich-text": "0.x"
  }
  1. Add rich-text block to your blocks files, in the place you want it to show up. For example:
"rich-text": {
  "props": {
    "textAlignment": "CENTER",
    "textPosition": "CENTER",
    "text": "Visit our [help](https://help.vtex.com/en/faq/what-is-vtex-io) section.\n*Be Bold!*\n**This is italic**",
    "textColor": "c-on-emphasis",
    "font": "t-heading-5",
    "blockClass": "help-message"
  }
}
Prop nameTypeDescription
fontString | {desktop: String, tablet: String, mobile: String}Define the tachyon token to be used as font. Default: t-body
textColorStringDefine the tachyon token to be used as text color. Default: c-on-base
textStringText written in markdown language to be displayed
textAlignmentTextAlignmentEnumControl the text alignment inside component. Default: "LEFT"
textPositionTextPostionEnumChoose in which position of the component text will be displayed, left, center or right. Default: "LEFT"
blockClassStringUnique class name to be appended to block classes. Default: ''

Here are the possible values of TextPostionEnum

Enum nameEnum valueDescription
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 nameEnum valueDescription
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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated 2 months ago


Rich Text


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.