/
Brief: Product Header [Block]

Brief: Product Header [Block]

Owned by Nick Harris
Last updated: Jul 05, 2022
2 min read

Component type

Block

Document status

FROZEN

Design source (in Figma)

https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=3380%3A53430

Author

@Nick Harris

Responsible

 

Milestone

3

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

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

  • Needs to be dynamic

  • Changes based on url

Description

Text

 

CTA Block labels

 

  • Needs to be dynamic

  • Changes based on url

  • Some options may not be available and need to be presented as 'disabled'

Disclaimer

Text

 

Carousel

Image

Needs to be dynamic - Changes depending on selection at CTA Block level

Carousel

Alt text

  • Need to determine if this is decorative of informative

  • Could make the call that this instance of Carousel is always decorative

Editorial 

  • N/A

Accessibility 

  • Accessibility requirements from Variant Selector and Carousel apply

  •  

Analytics & Data 

  • See Variant selector “Analytics & Data“ section.

Future Expansion 

  • N/A

Wider Conversations that may impact this 

  •  

Examples

Airwick - Half image header (no carousel) with image variant links.

 

Useful links

n/a