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 Add new images and content 
3. Assign card to JavaScript KOB selectorsfilters 

Source Code 

File Path: content/page-content/2618310-ferguson-own-brand-landing-page 

Add any new images or code into the source file location.

...

Policies and Procedures 

Content you will need to add for a new card

...

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(ex. 'resplumb') is what 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 in 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 div.
• 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
• Use the name on the left 
  • resplumb = Residential Plumbing
  • commech = Commercial / Mechanical
  • hvac = HVAC
  • builder = Builder
  • facilsupmain = Facility Supply & Maintenance
  • firefab = Fire & Fabrication
  • waterworks = Waterworks
  • industrial = Industrial