nsx-product-card-overview
#
IntroductionThe 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 guidanceWrap 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 ExcessWhen 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#
SpecificationAttribute | 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 |
#
EventsEvent | 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 placementThe 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!