Content Filters Background Anchor Settings

This is the headline, subheadline, and link that sit above your filters.  All of these fields are optional.

  1. Text Alignment: Choose to left justify or center align your headline, subheadline, and link.
  2. Headline Text: Specify  the filter frame headline and an SEO tag to wrap the text with.
  3. Subheadline Text: Specify the filter frame subheadline and an SEO tag to wrap the text with.
  4. Link Text: This is the user-facing text for your link.
  5. Action: Chose what action you want the link to use.
  6. Tooltip: This tooltip appears to the user when hovered over the link.

The Filters tab is where information about the filters is configured.  When clicking on a filter, the filter ID will be used to highlight components with the same handle and fade unrelated components.

  1. No Results Headline: If there are no results for the combination of filters shown, a No Results message will appear (see image below).  The default text will read “Oops! There are no results.”  Leave blank to use the default or customize your text.
  2. No Results Subheadline: If there are no results for the combination of filters shown, a No Results message will appear (see image below).  The default text will read “Please try another combination of filters.”  Leave blank to use the default or customize your text.
  3. You can configure up to five filters, and at a minimum you need to configure one filter.  Expand each filter to set up filter options.

    There is no limit to the number of filter options you can add for each filter.  When clicked the filter will use the ID to highlight content tagged with the same filter ID. The first filter option defined will be the show all default.

    Title and Filter ID: The ID can contain only lowercase alphanumeric characters and hyphens and must be unique for each filter.  To display a filter, you must at least fill out the filter headline and ID.
  4. Reorder and/or delete navigation items using the controls next to each item.  Click the green + icon at the bottom of the list to add a new item.
  1. Color: Select from 14 color options (white, light silver, light slate, dark silver, black, blue, dark blue, slate, teal, dark slate, dark teal, light silver texture, light slate texture, dark blue texture, dark slate texture, and dark teal texture) or none.  This should be selected even when using an image so that in case the image doesn’t render, the background will default to the color selected.

  2. Background/Foreground Contrast: The Background/Foreground Contrast setting will adjust according to the Background Color that has been selected.  The author can change the setting, but if an inaccessible combination of color and contrast is selected, a warning message will appear. 

    For more granular control, the option to customize these contrast settings also exist per device
  1. Anchor Name: The field where you can assign a unique anchor name to this banner component so it can be linked to from within the page if necessary.

Try it with these components

Basic List

Filter Frame only works with Basic List… so you have no choice!

Learn more

Tabbed Frame

Use Filter Frame and Basic Lists in Tabbed Frames to better organize your lists and content.

Learn more