Rich Text by vtex

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

{"base64":" ","img":{"width":1792,"height":1250,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":452544,"url":"https://user-images.githubusercontent.com/12139385/70084949-119b1f80-15ee-11ea-91dd-1277427c8aee.png"}}

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


_14<div>
_14      <p>
_14        <a href="https://developers.vtex.com/vtex-developer-docs/docs/welcome">
_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>

Please refer to the Markdown Documentation for more info.

Configuration

Import the rich text's app to your theme's dependencies in the manifest.json as in the following example:


_10  "dependencies": {
_10    "vtex.rich-text": "0.x"
_10  }

Add the rich-text block to your blocks files in the desired template position. For example:


_10"rich-text": {
_10  "props": {
_10    "textAlignment": "CENTER",
_10    "textPosition": "CENTER",
_10    "text": "Visit our [help](https://developers.vtex.com/vtex-developer-docs/docs/welcome) 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}`	Tachyon token to be used as font. Default: `t-body`
`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"`
`blockClass`	`String`	Unique class name to be appended to block classes. Default: ''

TextPostionEnum possible values

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.

TextAlignmentEnum possible 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.

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`