Skip to main content

ns-product-card

Introduction#

The product card enables users to browse, compare and choose a product.

Content guidance#

Product card_v4

KeyField typeGuidelines
AProduct nameThe product name should be brief and memorable, ideally 2 to 3 words (10 to 15 characters). Maximum 25 characters.
BPrice subtitleThis should be used to give context to your product price. 15 to 23 characters maximum.
CPrimary priceThe is the leading product price. This is optional as a product price may not always be available.
DSecondary priceThis is the secondary product price. This is also optional.
EProduct descriptionThe product description can accommodate multiple sub headings, lists and paragraphs. The content should be concise and use bulleted or checked lists to support skim reading. Comparable product features should be repeated in the same list order across all products. Content can contain bold copy <b> <strong>, inline links <a>, lists <ul> <ol>, and caveats if required <a href="#caveat">Caveat</a>.
FExpanderExpanders can be used to provide additional product detail. Each product should have a maximum of 3 expanders.
GCall to actionKeep the text ‘short, relevant, and actionable’. It should not exceed more than 10 characters.
HKeylineAn optional colour keyline can be added to distinguish and draw attention to your products.
IImageAn optional image with an aspect ratio of 16:9 can be added to support your product description.

Image guidance#

ComponentRatioDimensionsSizeTypePlaceholder
ns-product-card16:9640x360px< 50kbjpegns-product-card-640x360px

Best practice#

💚 Do's💔 Don'ts
Use for productsUse for other content types, use ns-card instead
Use the same sections for all products in a groupUse in a form
Give multiple cards the same html parent
Use role="list" and role="listitem" when used in multiples

Considerations of best practises#

Give multiple cards the same html parent - To improve scannability between multiple products; the name, price, and description sections will adjust to be the same height. They do this using a common html parent that's used to share css variables.

For example

💚 Do

<div role="list">
<ns-product-card role="listitem">...</ns-product-card>
<ns-product-card role="listitem">...</ns-product-card>
<ns-product-card role="listitem">...</ns-product-card>
</div>

💔 Don't

<div role="list">
<div role="listitem">
<ns-product-card >...</ns-product-card>
</div>
<div role="listitem">
<ns-product-card >...</ns-product-card>
</div>
<div role="listitem">
<ns-product-card >...</ns-product-card>
</div>
</div>

Usage#

View example on Storybook

Component placement#

The ns-product-card component can only be used in the ns-column component.

Specification#

AttributeTypeDefaultOptionsDescription
keylinestringnoneblue, yellow, green-light, cyan, redAdd a gradient across the top of the card
SlotsType
image<ns-image>
highlight<p>
name<h2>, <h3>
price-heading<h3>, <h4>
price<div>
description<div>
expander<ns-expander>
cta<ns-cta >

Specification notes#

image#

name and price-heading#

  • priceHeading should be one heading level lower than name

Price#

Description#

  • Div should only contain <p>, <ul>, <ol>

Expander#

cta#

Design Tokens

You can change the branded look and feel of the ns-product-card by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "theme": "white",
  "border-color": "#FFFFFF",
  "name": {
    "typography": "heading-3"
  },
  "box-shadow": [
    "rgba(170, 170, 170, 0.05) 0px 0px 0px 1px"
  ],
  "drop-shadow": [
    "rgba(170, 170, 170, 0.40) -3px 3px 10px",
    "rgba(51, 51, 51, 0.05) -20px 20px 20px"
  ],
  "price-heading": {
    "typography": "p-small-light"
  },
  "price": {
    "typography": "p-large",
    "first-child": {
      "typography": "heading-2-light"
    },
    "ns-live": {
      "typography": "p-normal"
    }
  },
  "separator-color": "#C8C9C7",
  "name-theme": "grey-light",
  "keylines": [
    "green-light",
    "blue",
    "cyan",
    "yellow",
    "red"
  ]
}

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!