The Rich Text block converts texts written in Markdown to HTML and displays it in your storefront.

imageimage

For example, the text [Help](https://developers.vtex.com/vtex-developer-docs/docs/welcome).\n**Be Bold!**\n*This is italic* is converted to:

<div>
      <p>
        <a href="https://developers.vtex.com/vtex-developer-docs/docs/welcome">
         Help
        </a>
        <br />
        <span class="b">Be Bold!</span>
        <br />
        <span class="i">This is italic</span>
      </p>
      

    </div>
  </div>

Please refer to the Markdown Documentation for more info.

Configuration

  1. Import the rich text's app to your theme's dependencies in the manifest.json as in the following example:
  "dependencies": {
    "vtex.rich-text": "0.x"
  }
  1. Add the rich-text block to your blocks files in the desired template position. For example:
"rich-text": {
  "props": {
    "textAlignment": "CENTER",
    "textPosition": "CENTER",
    "text": "Visit our [help](https://developers.vtex.com/vtex-developer-docs/docs/welcome) 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}Tachyon token to be used as font. Default: t-body
textColorStringTachyon token to be used as text color. Default: c-on-base
textStringText written in markdown language to be displayed.
textAlignmentTextAlignmentEnumText alignment inside the component. Default: "LEFT"
textPositionTextPostionEnumText position in relation to the component. Default: "LEFT"
blockClassStringUnique class name to be appended to block classes. Default: ''
  • TextPostionEnum possible values
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.
  • TextAlignmentEnum possible values
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

To apply CSS customizations in this and other blocks, 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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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