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

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

• Page link redirect
• Background image/url that is tied to a new CSS class
• Brand logo/url
• Established date
• h2
• paragraph
• Linking card to KOB filters at top of page

Adding a new card 

• First step is to add the new card html inside the grid with the class .brand–grid
• All cards are in alphabetical order according to brand name
• Below is the html frame for a card. You can also copy the html in the source code and edit as needed.

<a class="brand--card" href="">
      <div class="brand--card__company">
        <img src="/sites/content/image/" alt="" />
        <div class="brand--card__est">Est.</div>
      </div>
      <div class="brand--card__content">
        <h2></h2>
        <p></p>
      </div>
      <span class="brand--card__shop">Shop Now</span>
    </a>

Adding background image

• All card background images are in the top portion of the css to change quickly if needed.
• If you are adding a new card you will need to create a new css class following the naming convention in the source code.
• Below is an example of the css naming.

• The new class should be added to the div that has the class of .brand–card__company
• Example below is the Amerock background and class being used. 

Adding New Brand Logo 

• New WCS logo assets have been specifically created for this page
• Refer to "Background and Logo image - File Formatting" section for formatting specifics.

Background and Logo image - File Formatting

• Background images have been exported at around 800px wide and are kept around 40kb and under in size.
  • The image itself doesn't need to be a specific size, the css will adjust it accordingly.
• Brand Logos have been exported at 400px wide and are kept around 4kb in size.
• Brand logo WCS naming convention - (Brand Page - "insert brand name here" Logo)
• Brand background naming convention - (Brand Page - "insert brand name here" Background)

Linking the card to a KOB Filter

• below is an image of the KOB filters

• below is the code of the buttons

• 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.

• 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