| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
The Variant selector
Use When
X
X
Don’t Use When
X
X
Related/Similar Components
...
X
...
is component designed to allow a customer to configure their product selection from a set of variants. For example, pack size, scent, etc.
Usage
Do
Don’t
Use in any component other than Product header
This list may expand in the future
Anatomy
...
Item | Type / component | Notes |
|---|---|---|
1 | Typography | |
2 | Link | |
3 | Retailer link |
Key Content
Item | Type | Notes |
|
|
*Notes
...
X
Anatomy
...
Item
...
Type
...
Notes
...
1.
...
2.
Behaviour
Progressive enhancement:
Non JS
JS
Editorial
X
X
X
Label may be pulled from a dictionary
Accessibility
Key | Interaction |
|---|---|
Aria considerationsetc
Analytics & Data
...
X
...
Add from Product header
Related/Similar Components
Future Expansion
XDropdownsX
buttons etc
Wider Conversations that may impact this
Item: Description
Item: Description Retailer links: Is this a variant of links or a separate component
Inspiration from elsewhere
...