ns-product-card

Organism | Product card component.

Introduction

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

Content guidance

Product card_v4

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 can be added to support your product description.

Image guidance

Component

Ratio

Dimensions

Size

Type

Placeholder

ns-product-card

16:9

640x360px

< 50kb

jpeg

​ns-product-card-640x360px​

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 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

To see examples visit Storybook​

<ns-product-card keyline="green-light">
<ns-image slot="image" src="/aem6/content/dam/britishgas/images/ns/image16_9.png" alt="Description of image" ratio="16x9"></ns-image>
<p slot="highlight">Recommended</p>
<h2 slot="name">Product Name</h2>
<h3 slot="price-heading">Estimated</h3>
<div slot="price">
<p><b><ns-price pence="1200"></ns-price></b> / month</p>
<p><ns-price pence="14400"></ns-price> / year</p>
</div>
<div slot="description">
<p>A description of this product</p>
<ul class="ul-ticked">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</div>
<ns-expander slot="expander">
<h3 slot="heading">Expander</h3>
<p>Expander details</p>
</ns-expander>
<ns-expander slot="expander">
<h3 slot="heading">Expander</h3>
<p>Expander details</p>
</ns-expander>
<ns-cta href="#" slot="cta">Do something</ns-cta>
</ns-product-card>

Component relationship

Relationship

​

Does it live in a panel?

βœ… Yes

Does it live inside other components?

βœ… Yes

What layout classes can be used?

splash triple

Specification

Attribute

Type

Default

Options

Description

keyline

string

none

blue, yellow, green-light, cyan

Add a graident accross 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

name and price-heading

  • priceHeading should be one heading level lower than name

Price

Description

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

Expander

cta

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!