Skip to main content

ns-product-card

Introduction#

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

Content guidance#

Product card

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 (default), 4:3 or 1:1 can be added to support your product description.

Image guidance#

PreviewRatioDimensionsSizeTypePlaceholder
ns-product-card image placeholder for 16:9 ratio16:9640 x 360px<50kbjpegDownload 16:9
ns-product-card image placeholder for 4:3 ratio4:3640 x 480px<50kbjpegDownload 4:3
ns-product-card image placeholder for 1:1 ratio1:1640 x 640px<50kbjpegDownload 1:1

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 parentUse different ratio images across a set of multiple cards
Use role="list" and role="listitem" when used in multiplesOveruse the keyline - its purpose is to make that card stand out from others

Considerations of best practice#

Give multiple cards the same html parent. To improve scanning 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
keylinestringnonecyan, lime, navy, blue, forest, slate, orange, red, yellowAdd a colour 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": "#C3CED5",
  "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",
      "spacer": {
        "outside-bottom": "0.25rem"
      }
    },
    "typography": "p-normal",
    "strikethrough": {
      "width": "2px",
      "color": "#111518"
    },
    "first-child": {
      "typography": "heading-3",
      "spacer": {
        "outside-bottom": "0"
      }
    },
    "ns-live": {
      "typography": "p-normal"
    },
    "child": {
      "spacer": {
        "outside-top": "0.25rem"
      }
    }
  },
  "holder": {
    "spacer": {
      "inside-top": "1rem",
      "inside-right": "1rem",
      "inside-bottom": "1rem",
      "inside-left": "1rem",
      "basketball-court": {
        "inside-top": "1.25rem",
        "inside-right": "1.25rem",
        "inside-bottom": "1.25rem",
        "inside-left": "1.25rem"
      }
    }
  },
  "description": {
    "child": {
      "spacer": {
        "outside-top": "0",
        "outside-right": "0",
        "outside-bottom": "0",
        "outside-left": "0"
      },
      "not-first": {
        "spacer": {
          "outside-top": "1rem"
        }
      }
    }
  },
  "keylines": [
    "cyan",
    "lime",
    "navy",
    "blue",
    "forest",
    "slate",
    "orange",
    "red",
    "yellow"
  ],
  "border-width": "0.125rem",
  "keylines-deprecated": [
    "green-light",
    "red-dark",
    "green-dark",
    "blue-dark"
  ],
  "keylines-mapping": [
    "lime",
    "red",
    "forest",
    "navy"
  ]
}

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.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Edit this page