Component

Product Filter

SCSS Location: /styles/scss/partial/_product-filter.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

Custom display for Radio Buttons used for filtering.

These Custom Radio Buttons use the browser element as their base, but simply apply a custom style overtop of it.

Guidelines

The Product Filter will only display above 960px viewport width.

Clicking a non-selected Filter Button will deselect the button that was originally selected.

On page load, the All option will be selected by default.

The Filter Section has extra bottom padding because the container following containing the results will overlap it.

Usage

Filter Buttons for sorting Product Cards, currently used on the Browse All Products & Services Page.