Filters have been constructed using Bootstrap's extensive built in fiter components and are always displayed against an EF Silver or white background to ensure clarity and easy usability.
The search bar contains a magnifying glass icon for the clickable search function. In its non activated state, the search button is the EF Navy colour white EF Green being the hover over colour.
The search with dropdowns has a functionality that shows 'Most popular searches' and 'Most recent searches' when the user searches for something. All of the options listed under these two titles are clickable and act as search criteria, saving the user from having to type any of the popular or recent search queries.
This is activated when the user clicks on the search bar and deactivates when the user clicks on the search icon.
The disabled filter dropdown shows a light grey non-selectable disabled option at the end of the list.
The Apply/ Clear filters buttons have a bordered normal state, with a solid EF Green and dark red hover state. Filter buttons should only be used on white and grey backgrounds.
Mouse over the buttons above to view hover state.
Health and mental
well-being
Health and mental
well-being