Versions Compared

Version Old Version 5 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component link

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Storybook component

The product card component is a sibling of the Card component. Product cards are designed to be used for products and allow you to feature a set of attributes that summarise the product. Product cards link to a product’s PDP where the user can obtain more information.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

Warning

Dont's

Anatomy

Image Added

Item

Component type

Content type

Notes

1

Tag

n/a

Text

Status
colourGreen
titleOptional

2

Image

Image

JPG, PNG

Status
colourGreen
titleOptional

3

Overline

Heading block

Text

Status
colourGreen
titleOptional

4

Heading

Heading block

Text

Status
colourRed
titleMANDATORY

5

Description

Heading block

Text

Status
colourRed
titleMANDATORY

6

Disclaimer

Typography

Text

Status
colourGreen
titleOptional

7

Card surface

n/a

n/a

Visible for 'standard' variant.

Visual style

tbd

Editorial

  • tbd

Behaviour

  • tbd

Accessibility

  • tbd