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.

   Property	Details
   Title	Enter a title for the featured topics area. The default text is Featured Topics.
   Show Title	Check to show the title. Clear to hide the title.
   Overlay Color	The color to use as a wash over the tile background color. In the property’s rgba field, the default is 0,0,0,0.4.
   Overlay Hover Color	The color to use as a wash over the tile background color when a user mouses over the tile. The link icon indicates that the value is taken from the site’s theme. In Builder, you can test your hover color in Preview mode.
   Border Radius	Slide to adjust the curve of featured topic tile borders. If the component is in a narrow container, a round radius tends to look more oval. If you set border radius to 50, very round, we recommend that you set Text Position to left, right, or center. The text background color is always rectangular, and placing text at the top or bottom of a circular tile truncates the background.
   Text Color	Set the color of labels on featured topic tiles.
   Text Hover Color	Set the color to use for a label when a user mouses over the tile. In Builder, you can test your hover color in Preview mode.
   Text Background Color	Set the color to use for the tile background when it’s inactive. In the property’s rgba field, the default is 0,0,0,0.
   Text Background Hover Color	Set the color to use for the tile background when a user mouses over the tile. In the property’s rgba field, the default is 0,0,0,0. In Builder, you can test your hover color in Preview mode.
   Max Text Background Width	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. No matter what percentage you set, the text background width is always wide enough to support that label that sits on it.
   Text Position	Select where to place text on a featured topic tile. Top Left Top Center Top Right Left Center Right Bottom Left Bottom Center Bottom Right
   Text Alignment	Set alignment of text within the text background. Select Center, Left, or Right. Alignment changes can be less noticeable when text background is narrow or text is positioned at the top or bottom of the tile.

Example

Featured Topics on the Topic Catalog page.