'Product Header' component
- Sergiy Nalyvayko (Unlicensed)
Component type | Molecule |
|---|---|
Component possible inclusions | n/a |
Design source (in Figma) | |
Component status |
Introduction
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.
Anatomy
Key Content
Item | Type | Notes |
Breadcrumbs | Component | optional |
Product name | Typography |
|
Sub heading (product variant) | Typography | optional |
Description | Typography |
|
CTA block labels | Typography |
|
Image carousel | Component |
|
Disclaimer | Typography | optional |
Visual Style
Usage
Do’s
Use once on a PDP
Use all available props to clearly describe and categorise the product.
Don’ts
Over describe the product
Use on any page that isn’t a PDP
Use multiple instances of this component on a single page.
Include too many product images
Related/Similar Components
Headers