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 | CTA Block | |
7 | Typography | Disclaimer |
8 | Image carousel | 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 | Needs to be dynamic - Changes depending on selection at CTA Block level |
Description | Text | |
CTA Block labels | Should CTA block be a form in this instance? Will be dynamic, some options may become unavailable depending on selection | |
Disclaimer | Text | |
Carousel | Image | Needs to be dynamic - Changes depending on selection at CTA Block level |
Carousel | Alt text |
Editorial
Accessibility
Accessibility requirements from CTA Block and Carousel still apply
Analytics & Data
N/A
Future Expansion
Wider Conversations that may impact this
Heading Control: Can we programmatically determine headings so that the content is properly?
Examples
Useful links
n/a