Skip to main content

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.

<ns-panel decoration="invert-concave-grey-light">
<nsx-product-card-overview></nsx-product-card-overview>
</ns-panel>

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#

<nsx-product-card-overview excess="[60,0]" pricing='[{"monthly": 1200,"annually": 14400,"excess": 90}]' priceheading="Estimated Price"></nsx-product-card-overview>

Experience pattern - Product Card Overview with Excess

Without Excess#

Usage#

<nsx-product-card-overview pricing='[{"monthly": 1200,"annually": 14400,"excess": 90}]' priceheading="Estimated Price"></nsx-product-card-overview>

Experience pattern - Product Card Overview

Specification#

AttributeTypeDefaultOptionsDescription
pricingarray[]requiredThe list of price values to be updated in the product card price slots
excessarray[]optionalThe list of excess prices that will be displayed as radio options to the user for excess selection
priceheadingstringEstimated PriceoptionalThe product card price heading prefix used to display in product card price heading slot along with excess value if any
SlotsType
headingh tag
contentns-content tag
product-*ns-product-card tag
download-filesul tag with nested multipleli of ns-download for multiple files

Events#

EventDescriptionDetails
excess-changeDispatched 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!