Purpose

This document is a guideline for the visual designers on informing and adding a new brand to the own brand page. https://www.ferguson.com/shop/ferguson-brands. 

Order of Operations 

1. Add new card into the grid 
2. Change background image  
3. Assign card to JavaScript KOB selectors 

...

Linking the card to a KOB Filter

• below is an image of the KOB filters

Image Added

• below is the code of the buttons

Image Added 

• The text inside of the brackets is what (ex. 'resplumb') determines what KOB will generate.
• The appropriate name in brackets will need to be applied as a class to the main card which has a class of .brand–card.
• If you don't want the card to show up any filter, do not add any classes. If you want the card the appear under every KOB filter you will need to add each class to the main card.
• The image below shows a card that will appear when the filters "Builder" or "Facility Supply & Maintenance" are selected. All cards by default will show under the "All Brands" filter.

Image Added

• Below is the list of KOB classes for each KOB filter
  • resplumb = Residential Plumbing
  • commech = Commercial / Mechanical
  • hvac = HVAC
  • builder = Builder
  • facilsupmain = Facility Supply & Maintenance
  • firefab = Fire & Fabrication
  • waterworks = Waterworks
  • industrial = Industrial