Refinements is a container for filters. It includes a top section for selected filters and a clear all function, and a bottom section for accordions and filter controls. Refinements can be nested in a slide out panel as needed.

Common Characteristics

Refinements have a top and bottom section.

The top section contains an optional heading, filter chips representing selected filters, a clear all function, and an optional save all function.

The bottom section is an empty container that can contain any combination of filter accordions with nested filter controls or standalone filter controls.

The entire Refinements component can be nested in a Slide Out Panel as needed for smaller breakpoints.

States and Options

Refinements can have an optional heading, and an optional “save all” function.