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.
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.
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.
To display the price offer of a product in the overview component,
was / now option in
monthly pricing can be used to display the original and current price. The
was price is displayed with
Was prefix and a strikethrough in the price. The
now price is displayed with
Now prefix, when accompanied with
was price. The
was price is optional whereas
now price is mandatory.
was / now option can be used with / without Excess pricing.
To allow a display of a special offer which requires the
now price to have two different values you can supply it with the following shape:
|The list of price values to be updated in the product card price slots. Each product card price has |
|The list of excess prices that will be displayed as radio options to the user for excess selection|
|The product card price heading prefix used to display in product card price heading slot along with excess value if any|
|Dispatched when the user changes the excess price radio option|
|💚 Do's||💔 Don'ts|
|Always use ||Use |
|Always use ||Use |
|Always use |
The nsx-product-card-overview component can only be used in the ns-panel component.
- 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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.