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
Variants
Properties
ProductBox
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| href | String | true | - |
| series | Enum 'premium-class' │ 'xtreme' │ 'exterior' │ 'interior' │ 'winter' │ 'wheel-rims' │ 'carwash' │ 'molecular' │ 'professional' │ 'bike' │ 'profiline' │ 'caravan' | false | - |
| seriesLabel | String | false | - |
| newLabel | String | false | Neu |
| title | String | true | - |
| variants | String | false | - |
| awarded | Bool | false | - |
| isNew | Bool | false | - |
| loading | Bool | false | - |
| price | String | false | - |
| discountPrice | String | false | - |
| currency | String | false | - |
| utilClassNames | String | false | - |
ProductBox.Image
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| utilClassNames | String | false | - |