Versions Compared

Version Old Version 9 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconIdefa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:Storybook:
panelIconText:Storybook:
bgColor#F4F5F7

Storybook component

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
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

  • Use the product header to direct users to alternatives product quantities and variants of a single product type

Warning

  • Do not use the product header on pages other than product detail pages.

  • Do not use more than one product header on a single page

Anatomy

Item

Component type

Content type

Notes

1

Breadcrumbs

Breadcrumbs

Text, URLs

2

Heading

Typography

Text

3

Sub heading

Typography

Text

4

Description

Typography

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

Typography

Text

8

Carousel (image)

Carousel

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

  • …Use the Breadcrumb's hideLastItem property to hide the name of the product if it’s repeated immediately by the heading.

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.