| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 | |
6CTA | BlockVariant selector | Not part of MVP? These are links not buttons and need to be disabled if certain product variants are unavailable. | |
7 | Typography | DisclaimerRetailer links | Variant of link or different component? |
8 | Disclaimer | ||
Image carousel9 | Image carouselCarousel |
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 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
N/A
Accessibility
Accessibility requirements from CTA Block Variant Selector and Carousel still apply
Analytics & Data
See Variant selector “Analytics & Data“ section.
Future Expansion
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