📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Rich Text

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.

image

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
fontStringDefine 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
strong
italic
link
heading
paragraph
image