ns-product-card
Introduction#
The product card enables users to browse, compare and choose a product.
Content guidance#
| Key | Field type | Guidelines |
|---|---|---|
| A | Product name | The product name should be brief and memorable, ideally 2 to 3 words (10 to 15 characters). Maximum 25 characters. |
| B | Price subtitle | This should be used to give context to your product price. 15 to 23 characters maximum. |
| C | Primary price | The is the leading product price. This is optional as a product price may not always be available. |
| D | Secondary price | This is the secondary product price. This is also optional. |
| E | Product description | The 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>. |
| F | Expander | Expanders can be used to provide additional product detail. Each product should have a maximum of 3 expanders. |
| G | Call to action | Keep the text ‘short, relevant, and actionable’. It should not exceed more than 10 characters. |
| H | Keyline | An optional colour keyline can be added to distinguish and draw attention to your products. |
| I | Image | An 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#
| Preview | Ratio | Dimensions | Size | Type | Placeholder |
|---|---|---|---|---|---|
 | 16:9 | 640 x 360px | <50kb | jpeg | Download 16:9 |
 | 4:3 | 640 x 480px | <50kb | jpeg | Download 4:3 |
 | 1:1 | 640 x 640px | <50kb | jpeg | Download 1:1 |
Best practice#
| 💚 Do's | 💔 Don'ts |
|---|---|
| Use for products | Use for other content types, use ns-card instead |
| Use the same sections for all products in a group | Use in a form |
| Give multiple cards the same html parent | Use different ratio images across a set of multiple cards |
Use role="list" and role="listitem" when used in multiples | Overuse 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
💔 Don't
Usage#
Component placement#
The ns-product-card component can only be used in the ns-column component.
Specification#
| Attribute | Property | Type | Default | Options | Description |
|---|---|---|---|---|---|
keyline | keyline | string | none | cyan, lime, navy, blue, forest, slate, orange, red, yellow | Add a colour across the top of the card |
| Slots | Type |
|---|---|
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#
- Check the ns-image documentation for more information.
Name and price-heading#
- priceHeading should be one heading level lower than name
Price#
- Use multiple
<p>containing<ns-price> - Check the ns-price documentation for more information.
Description#
- Div should only contain
<p>,<ul>,<ol>
Expander#
- Multiple expanders may be used
- Check the ns-expander documentation for more information.
CTA#
- Should always have a href
- Check the ns-cta documentation for more information.
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.