nsx-product-card-overview
Introduction#
The product card overview is an experience pattern that can be used to compare HomeCare products against each other and see the difference in price when choosing to have an excess or not - without having to reload the entire page.
Content guidance#
Wrap the overview component in ns-panel and use its decoration attribute for decoration. It is possible to use any decoration for ns-panel. However we recommend to use only invert-concave-grey-light decoration for better accessibility of the contents inside the overview component.
With Excess#
When excess property of the overview component is set with an array of price options, the excess prices are displayed as radio options in the overview component. When a user selects a radio option, an excess-change event is dispatched from the overview component. The consuming wrapper component has to listen for the event and sets the updated ns-product-card prices back in the pricing attribute of the component.
Usage#
Without Excess#
Usage#
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
pricing | array | [] | required | The list of price values to be updated in the product card price slots |
excess | array | [] | optional | The list of excess prices that will be displayed as radio options to the user for excess selection |
priceheading | string | Estimated Price | optional | The product card price heading prefix used to display in product card price heading slot along with excess value if any |
| Slots | Type |
|---|---|
heading | h tag |
content | ns-content tag |
product-* | ns-product-card tag |
download-files | ul tag with nested multipleli of ns-download for multiple files |
Events#
| Event | Description | Details |
|---|---|---|
excess-change | Dispatched when the user changes the excess price radio option |
Best practice#
| 💚 Do's | 💔 Don'ts |
|---|---|
Always use pricing attribute to set price in product cards. | Use price slot in each product card |
Always use priceheading attribute to set price heading in product cards. | Use price-heading slot in each product card |
Always use ns-content for content slot to add subheading and description of the overview component. |
Component placement#
The nsx-product-card-overview component can only be used in the ns-panel component.
Feedback#
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!