---
schema_version: "1"
id: 7ee3ada1508c7524ccd312a55f0f97beb64fb82bbf9c7184d4c6105f353d975f
title: Featured Topics
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_topic_featured.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_topic_featured.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f059354a65fde60b5de35224bb13480f72a49c910d75b2c8352a062dbf7e4904
description: The Featured Topics component lets you place your Experience Builder site’s designated featured topics and the images that represent them on any page.
products:
  - Experiences
release: "264"
---
# Featured Topics

The Featured Topics component lets you place your Experience Builder site’s designated featured topics and the images that represent them on any page.

1. From the Components list, select the Featured Topics component and drag it onto a page.
2. On the page, select the **Featured Topics** component.
3. In the property editor, configure the properties for the component.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d70094e61">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d70094e64">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Title</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">Enter a title for the featured topics area. The default
                  text is <samp class="parmname">Featured Topics</samp>. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Show Title</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">Check to show the title. Clear to hide the title.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Overlay Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">The color to use as a wash over the tile background
                  color. In the property’s <strong class="uicontrol">rgba</strong> field,
                  the default is <kbd>0,0,0,0.4</kbd>.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Overlay Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>The color to use as a wash over the tile background color
                    when a user mouses over the tile. The <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/linked_to_theme.png" alt="Linked to theme icon"></span> link icon indicates that
                    the value is taken from the site’s theme.</p>
                  <p style="margin-bottom:0;">In Builder, you
                    can test your hover color in Preview mode.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Border Radius</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Slide to adjust the curve of featured topic tile
                    borders.</p>
                  <p>If the component is in a narrow container, a
                    round radius tends to look more oval.</p>
                  <p style="margin-bottom:0;">If you set
                    border radius to <kbd>50</kbd>, very round,
                    we recommend that you set Text Position to
                    <kbd>left</kbd>,
                    <kbd>right</kbd>, or
                    <kbd>center</kbd>. The text background
                    color is always rectangular, and placing text at the top
                    or bottom of a circular tile truncates the
                    background.
                  </p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">Set the color of labels on featured topic tiles.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Set the color to use for a label when a user mouses over
                    the tile.</p>
                  <p style="margin-bottom:0;">In Builder, you can test your hover color in
                    Preview mode.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">Set the color to use for the tile background when it’s
                  inactive. In the property’s <strong class="uicontrol">rgba</strong>
                  field, the default is
                  <kbd>0,0,0,0</kbd>.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Background Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Set the color to use for the tile background when a user
                    mouses over the tile. In the property’s
                    <strong class="uicontrol">rgba</strong> field, the default is
                    <kbd>0,0,0,0</kbd>.
                  </p>
                  <p style="margin-bottom:0;">In Builder, you can
                    test your hover color in Preview mode.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Max Text Background Width</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Move the slider to control the width of the text
                    background color. Width percentage is set against the full
                    width of the tile. So 100% is the full width of the tile,
                    rather than the full width of the browser page or the
                    featured topic component.</p>
                  <p style="margin-bottom:0;">No matter what percentage you
                    set, the text background width is always wide enough to
                    support that label that sits on it.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Position</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Select where to place text on a featured topic tile.</p>
                  <ul>
                    <li><kbd>Top Left</kbd></li>
                    <li><kbd>Top Center</kbd></li>
                    <li><kbd>Top Right</kbd></li>
                    <li><kbd>Left</kbd></li>
                    <li><kbd>Center</kbd></li>
                    <li><kbd>Right</kbd></li>
                    <li><kbd>Bottom Left</kbd></li>
                    <li><kbd>Bottom Center</kbd></li>
                    <li><kbd>Bottom Right</kbd></li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e61 ">
                  <samp class="parmname">Text Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d70094e64 ">
                  <p>Set alignment of text within the text background. Select
                    <kbd>Center</kbd>,
                    <kbd>Left</kbd>, or
                    <kbd>Right</kbd>.
                  </p>
                  <p style="margin-bottom:0;">Alignment changes can be
                    less noticeable when text background is narrow or text
                    is positioned at the top or bottom of the
                    tile.</p>
                </td>

              </tr>
            </tbody>
          </table>

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example

Featured Topics on the Topic Catalog page.

![Featured Topic component on the Topic Catalog page.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/rss_communities_featured_topic.png)

#### See Also

- [Set Up Featured Topics](https://help.salesforce.com/s/articleView?id=experience.networks_topics_featured.htm&release=264.0.0&type=5 "Featured topics highlight current, popular conversations in your Experience Cloud site. Change them regularly to keep members up-to-date and engaged.")