Product Filter

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


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.


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.


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