The Product Header Block serves as the entry point for a PDP and contains all configurable options available for the product being viewed. This block also contains the primary call to action for a PDP, adding to basket or linking through to approved retailers.
Usage
Do’s
Use once on a PDP
Use all available props to clearly describe and categorise the product
Dont’s
Over describe the product
The rest of the page is available to list more details
Use on any page that isn’t a PDP
Use multiple instances of this component on a single page.
Include too many product images
Anatomy
Item | Component / type | Notes |
|---|---|---|
1 | Breadcrumbs | Breadcrumbs are a M4 component - not yet implemented |
2 | Typography | Product name |
3 | Typography | Sub heading (product variant) |
4 | Typography | Description |
5 | Typography | CTA Block label |
6 | Variant selector | Not part of MVP? These are links not buttons and need to be disabled if certain product variants are unavailable. |
7 | Retailer links | Variant of link or different component? |
8 | Disclaimer | |
9 | Image Carousel |
See Figma for full list of variants.
Related/Similar Components
Headers
Key Content
Item | Type | Notes |
Breadcrumbs | Text | As discussed in breadcrumbs spec - need a way to control level (product variant not needed) |
Heading | Text | |
Sub heading (product variant) | Text |
|
Description | Text | |
CTA Block labels |
| |
Disclaimer | Text | |
Carousel | Image | Needs to be dynamic - Changes depending on selection at CTA Block level |
Carousel | Alt text |
|
Editorial
N/A
Accessibility
Accessibility requirements from Variant Selector and Carousel apply
Analytics & Data
Clickthrough data for retailer links
Future Expansion
N/A
Wider Conversations that may impact this
Examples
Useful links
n/a