Desktop Filters Design

Mobile Filters Design

Figure 1

Figure 2

  1. If a filter module only has up to 7 options/variants then it will be like Figure 1

  2.  If a filter module has 8+ options/variants then the design will be like Figure 2, with the scroll list and search box

  3.  Each option/filter should show the number of results/records in brackets after it, e.g ‘Syria (21)’

  4. The ‘Clear Filter’ Button should only display once a filter has been applied, otherwise only the ‘Apply filter’ button should show as seen in Figure 1

Donation Page & Appeals Page Filters

Our Work Page Filters

The Date/Year field, current year must be selected then they can scroll up for previous years etc.