To add rich text to a card, we’ll need to update the relevant card in several ways. Make sure you’ve forked a card that you can edit at the top-level and you’re not editing a card in the theme itself.

1. Map the details property to rich text HTML: either use the rich text formatter or use a Markdown or Rich Text (v2) field.
2. Handle rich text truncation: If you’re using the rich text formatter, you can either disable truncation or update the card to handle RTF truncation, depending on what theme you’re on. Note if you are using a Markdown or Rich Text (v2) field, truncation is not built in to the Theme.
3. Update the Handlebars template to allow HTML to display on the page.
4. Add optional styling to the rich text.

Rich text is most commonly used for the details section of cards but you can use it with any field you have stored as a Rich Text Field in the Knowledge Graph. Make sure to update that field instead of details which is referenced throughout the rest of this article.

To Change Cards to Support Rich Text:

1. Map the details property to rich text HTML: In the card component.js file, set the details property to take in the rich text field. How you convert rich text to HTML will depend on the field type of the rich text field you are using:
   • If you are using a field of type Markdown or Rich Text (v2), use the HTML subfield of the field you wish to display (replace c_testRTDescription with the API name of your field):

     • details: profile.c_testRTDescription ? profile.c_testRTDescription['html'] : null

   • If you are using a field of type Legacy Rich Text (v1), use the rich text formatter (replace answer with the API name of your field). See the Common Formatters reference doc to learn more about the rich text formatter.

     • details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null,

2. Handle rich text truncation: How you deal with show more and truncation functionality will depend on the type of field you are using and the version of the Theme you are building on:
   • • If you are using a field of type Markdown or Rich Text (v2), rich text truncation is not built into the Theme. If your rich text field has longer content than what you’d want to fit on a card, we suggest you use the default snippets built into the document-standard card (instead of what you did in step 1). This looks like:

       • dataForRender(profile) { 
           let detailsData = ''; 
           if (profile?.d_highlightedFields?.s_snippet) { 
             const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet; 
             detailsData = Formatter.highlightField(value, matchedSubstrings); 
           } else if (profile.s_snippet) { 
              detailsData = profile.s_snippet; 
           } 
         
           return { 
             ... 
             details: detailsData, // The text in the body of the card

1. • If you are using a field of type Legacy Rich Text (v1) and are on Theme 1.28 or below, disable the show more/show less functionality. The risk is that with the truncation, you’d cut off a closing tag (ex </div>, </p>), which could break the page. Comment out or delete the showMoreDetails object in the component.js file for your card.

     • // showMoreDetails: { 
       // showMoreLimit: 750, // Character count limit 
       // showMoreText: 'Show more', // Label when toggle will show truncated text 
       // showLessText: 'Show less' // Label when toggle will hide truncated text 
       // }, 

   • If you are using a field of type Legacy Rich Text (v1) and are on Theme 1.29 or above, you can use RTF truncation. Use showMoreDetails with truncatedDetails. If this exists on your card, you may need to comment it in. Otherwise, edit your card component.js file to look something like (replace answer with the API name of your field):

     • return {
         title: profile.name, // The header text of the card
         ...
         details: profile.answer ? ANSWERS.formatRichText(profile.answer, 'answer',
       linkTarget) : null, // The text in the body of the card
         // If the card's details are longer than a certain character count, you can truncate the
         // text. A toggle will be supplied that can show or hide the truncated text.
         // Note: If you are using rich text for the details, you should not enable this feature.
           showMoreDetails: {
             truncatedDetails: profile.answer ? ANSWERS.formatRichText(profile.answer,
       'answer', linkTarget, 38) : null, // Character count limit
             showMoreText: 'Show more', // Label when toggle will show truncated text
             showLessText: 'Show less' // Label when toggle will hide truncated text
         },
         ...
       }

       • The value for truncatedDetails is similar to details, but passes an additional parameter to ANSWERS.formatRichText: the character count that the rich text content will be truncated at, in this case 38. This character count will ignore all non-text characters, such as HTML tags and formatting. Any string value can be passed into truncatedDetails. For example, if you have the below card details, the 3 hashtags at the start and middle will be ignored, as well as the new line symbols:
       • By default, an ellipsis is added to the end of the truncated text. This can be customized by adding one more parameter to ANSWERS.formatRichText to specify the suffix. To remove the ellipsis completely, you could specify a blank string instead:

         • ANSWERS.formatRichText(profile.answer, 'answer', linkTarget, 38, '')

3. Update the Handlebars template to allow HTML to display on the page. Add {{{ }}} to the details section in your Handlebars template. This ensures that the HTML is rendered on the page, instead of printed as-is or escaping the HTML.
   • This is done by default in the built-in faq-accordion card. If you are forking a card, ensure that the fields that use rich text are surrounded by triple braces in the template.hbs file of the card.

     • • <div class="HitchhikerFaqAccordion-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} 
         js-hidden{{/if}}"> 
            {{{card.details}}} 
         </div>

4. (Optional) Add Styling.
   • There might be some additional styling you want to add. For example, spacing between paragraphs and link styling. Recommended styling is below:

     • .HitchhikerFaqAccordion-details
       {
         p, ul, ol
         {
           margin-bottom: .5rem
         }
       
         a
         {
           color: var(--yxt-color-brand-primary);
           text-decoration: underline;
       
           &:hover {
           text-decoration: none;
           }
         }
       }