| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
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 headers header also contains the primary call to action for a PDP, adding to basket or linking through to approved retailers.
| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Usage
| Tip |
|---|
| Warning |
|---|
Anatomy
Item | Component type | Content type | Notes | |
|---|---|---|---|---|
1 | Breadcrumbs | Text, URLs | ||
2 | Heading | Text | ||
3 | Sub heading | Text | ||
4 | Description | 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 | Text | ||
8 | Carousel (image) | 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
…
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.