Pixel Perfect

This Pixel Perfect outlines the updated standards for using hero images and layout across the Homepage, Category Landing Page (CAT), and their related core pages.

All CAT pages will now use icons instead of images in their copy blocks. In most cases, a single hero image will be used across the CAT page and its core pages. Exceptions may apply when services are visually distinct or when clients provide their own imagery.

We are shifting to a simplified image approach for CATs and their core pages. In most cases, a single hero image will now be used for both the Category Landing Page and all of its associated core pages. This streamlines production and reinforces visual consistency.

When a selected PBN displays images in homepage copy blocks, it is now the designer’s responsibility to ensure that any corresponding CAT copy blocks are updated to use icons instead of images. This change is required regardless of how the homepage is styled.

Implementing Icon Copy Blocks

Designers are required to replace image-based copy blocks on Category Landing Pages with icon-based versions. To do this, they will insert a new design section by choosing from one of four pre-built Category Landing Page Icon Sections, located in the Cat Icons section folder. Designers may choose any of the four options—Cat Icons - A, Cat Icons - B, Cat Icons - C, or Cat Icons - D—at their discretion. However, once a layout is selected, that same section must be used consistently across all Category Landing Pages on the site.

Each icon block must preserve the intended alignment between the icon, the text, and the Learn More button as originally designed. Designers must replace the default icons with ones that are directly relevant to the content, service, or product featured. Icons may be either solid or outline style, but the chosen style must be applied consistently site wide.

When implementing the new section, designers must copy and paste the content from the original image-based copy blocks into the new layout. This includes the headline, summary, and the link connected to the Learn More button. Content should be pasted top to bottom, left to right, to preserve both order and intent.

Adjusting for Uneven or Odd Numbers of Copy Blocks

Depending on the number of subpages associated with the Category Landing Page, the designer may need to adjust the layout to accommodate an odd number of copy blocks. Several layout variations are provided for each Cat Icons section (e.g., layouts for 2, 3, 4, 5, 7, or 9 blocks). Designers are expected to:

• Choose the version of the section that best fits the total number of copy blocks.
• Maintain spacing, alignment, and visual hierarchy as designed.
• Use the most appropriate configuration to preserve readability and consistency across screen sizes.
  
  

Examples of how to handle different copy block counts are demonstrated in the Cat Icons preview references. This ensures flexibility in layout without compromising design quality.

Hero Image Selection Expectations

While the default approach is to use one hero image across the CAT and its core pages, designers have flexibility in the following situations:

• When the core pages are visually distinct (e.g., Outdoor Kitchens, Fire Pits, Pergolas), designers may select unique hero images per subpage to better reflect the content and improve user clarity.
• When client-provided imagery is available, and the images are high quality and appropriate for hero use, they should be used in place of stock. Designers should match these to the most relevant core pages.
• In mixed-service websites, it may be appropriate to use a shared image for some categories and varied images for others, depending on the subject matter and available assets. Designers should use their judgment.
  
  

Regardless of the hero image selection, Category Landing Pages must always use icons in place of images within their copy blocks. This standard applies in all scenarios.