Rich Text

The High Velocity front-end app provides two components to render rich text.

• RichText: renders paragraphs from a string of text
• RichTextList: renders an unordered list from an array of items

Examples

Rich Text

The RichText component will split the string on new lines (\n) and render each string as a paragraph.

Preview

The Fleece Jacket is designed for both outdoor adventures and cozy relaxation at home.

Made from soft, comfortable fleece, this jacket provides warmth and comfort on even the coldest days.

The full zip closure and two side pockets add functionality and convenience. Whether you're exploring the great outdoors or lounging at home, the Fleece Jacket has you covered.

Code

  import { RichText } from '@hv/ui/richtext';

  <RichText>
    {`The Fleece Jacket is designed for both outdoor adventures and cozy relaxation at home. \n Made from soft, comfortable fleece, this jacket provides warmth and comfort on even the coldest days. \n The full zip closure and two side pockets add functionality and convenience. Whether you're exploring the great outdoors or lounging at home, the Fleece Jacket has you covered.`}
  </RichText>

Rich Text Props

Property	Description	Type
className	Custom CSS classes	String
children	The text to render	String
props	Additional properties from HTML attributes.	HTMLParagraphElement

Rich Text List

Preview

• Material: Soft fleece
• Closure: Full zip
• Pockets: Two side pockets

Code

  import { RichTextList } from '@hv/ui/richtext';

  <RichTextList>
    {[
      'Material: Soft fleece',
      'Closure: Full zip',
      'Pockets: Two side pockets',
    ]}
  </RichTextList>

Rich Text List Props

Property	Description	Type
className	Custom CSS classes	String
children	The list items to display	ReactNode