---
schema_version: "1"
id: 39993d97eae8db8e2e655e815e64b5514491fc2e38bc88f351eb4a2aa72bf8db
title: Featured Topics & Feeds
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_home_tabs.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_home_tabs.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 75d47f35a2f82c7f453496c05b1282ca9321beec3473b047eae44de004846c75
description: The Featured Topics & Feeds component gives members access to Featured Topics, Discussions, and My Feed in a tabbed setting. Site members must be logged in to see the My Feed tab. The Featured tab shows the featured topics you configured in the Content Management Workspace. You can boost your brand by providing images for featured topics. Topics and images are displayed as tiles on the Featured tab.
products:
  - Experiences
release: "264"
---
# Featured Topics & Feeds

The Featured Topics & Feeds component gives members access to Featured Topics, Discussions, and My Feed in a tabbed setting. Site members must be logged in to see the My Feed tab. The Featured tab shows the featured topics you configured in the Content Management Workspace. You can boost your brand by providing images for featured topics. Topics and images are displayed as tiles on the Featured tab.

1. Select the **Featured Topics & Feeds** component in the page you’re configuring or drag the component from the Components panel to the page.
2. 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="d113902e55">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d113902e58">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e55 ">
                  <samp class="parmname">Featured Tab Label</samp>
                </td>

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

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e55 ">
                  <samp class="parmname">Discussion Tab Label</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">Enter a label for the Discussions tab. The default label
                  is <samp class="parmname">Discussions</samp>.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e55 ">
                  <samp class="parmname">My Feed Label </samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">Enter a label for the My Feed tab. The default label is
                  <samp class="parmname">My Feed</samp>.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e55 ">
                  <samp class="parmname">Default Sort Order for Discussion
                    Feed</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">Present site members and guests with the initial feed
                  sort order that you intend. If users change the sort order
                  in their view, their selection sticks.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e55 ">
                  <samp class="parmname">Compact Feed in Discussion
                    Tab</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">Use the compact version of the feed on the Discussions
                  tab. Compact feeds show only question titles and make it
                  easier for users to scan the feed. Compact feeds don’t
                  support filters.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">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="d113902e55 ">
                  <samp class="parmname">Overlay Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <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 Experience Builder’s theme.</p>
                  <p style="margin-bottom:0;">In
                    Experience Builder, you can test hover colors in Preview
                    mode.</p>
                </td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <p>Slide to adjust the curve of the border around each
                    featured topic tile.</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="d113902e55 ">
                  <samp class="parmname">Text Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">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="d113902e55 ">
                  <samp class="parmname">Text Hover Color</samp>
                </td>

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

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">Set the color to use for the tile background when it is
                  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="d113902e55 ">
                  <samp class="parmname">Text Background Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <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 Experience Builder,
                    you can test hover colors in Preview mode.</p>
                </td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <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="d113902e55 ">
                  <samp class="parmname">Text Position</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <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="d113902e55 ">
                  <samp class="parmname">Text Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d113902e58 ">
                  <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 Sample Featured Topics & Feeds component:

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

#### See Also

- [Which Components Can I Use with Each Aura Template?](https://help.salesforce.com/s/articleView?id=experience.rss_component_reference_table.htm&release=264.0.0&type=5 "Aura site templates, such as Customer Service and Partner Central, are each composed of pages, which in turn are made up of customizable components. Consult this table to find out which Aura template each component can be used in, and when the component became available.")