/
Product header

*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Product header

Owned by Nick Harris
Last updated: Jan 03, 2023
2 min read

The Product Header serves as the entry point for a PDP and allows the user to configure a set of attributes like quantity and product variant. Product header also contains the primary call to action for a PDP, adding to basket or linking through to approved retailers.

Usage

  • Use the product header to direct users to alternatives product quantities and variants of a single product type

Anatomy

 

Item

Component type

Content type

Notes

 

Item

Component type

Content type

Notes

1

Breadcrumbs

Breadcrumbs

Text, URLs

 

2

Heading

Typography

Text

 

3

Sub heading

Typography

Text

 

4

Description

Typography

Text

 

5

Variant selector

n/a

 

Internal component made up of Links (selector variant)

6

Retailer links

n/a

 

Internal component made up of Links (retailer variant)

7

Disclaimer

Typography

Text

 

8

Carousel (image)

Carousel

JPG, PNG

 

Visual style

  • This component has no additional visual styles or variants.

  • This component has two modes: default, and inverse to cater for light and dark backgrounds.

Editorial

  • Use the Breadcrumb's hideLastItem property to hide the name of the product if it’s repeated immediately by the heading.

Behaviour

  • Variant selector links:

    • Although these look like buttons, they are in fact links. Clicking on these will navigate the consumer to a different page containing the product variant they have selected. Consumer selection will be preserved to offer a better experience.

Accessibility

  • To create an accessible “disabled link” appearance, variants which are unavailable but must still be displayed, are displayed as plain text.