Product Box
Overview
When to use
The product box element could be used if a product should be displayed in a listing context to give a clear overview over multiple product items only displaying the most essential product information.
When to consider an alternative
If a product series should be displayed, if the purpose is more marketing related or emotional than structural and if the teased item is not a product.
Image sizes
| brp-0 | brp-1 | brp-2 | brp-3 | brp-4 | |
|---|---|---|---|---|---|
| Max. Height | 180px | 195px | 244px | 180px | 180px |
Component
Default
1024px
375px768px1400px
Variants
1024px
375px768px1400px
Properties
ProductBox
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
| href | String | true | - |
| series | Enum | false | - |
| title | String | true | - |
| variants | String | false | - |
| awarded | Bool | false | - |
| new | Bool | false | - |
| loading | Bool | false | - |
ProductBox.Image
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |