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 

...

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

...

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.

Image Added

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

Image Added

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