Overview

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

Summarise it!

✨ This is an auto-generated AI summary of the ns-product-card's documentation. It may not be accurate. ✨

Examples

Configure

Guidance

Do

• Use for products.
• Use the same sections for all products in a group.
• Give multiple cards the same HTML parent.
• Use role="list" and role="listitem" when used in multiples.

Don't

• Use for other content types - use <ns-card> instead.
• Use in a form.
• Use different ratio images across a set of multiple cards.
• Overuse the keyline - its purpose is to make that card stand out from others.

Standard

Key

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	Keyline	An optional colour keyline can be added to distinguish and draw attention to your products.
D	Image	There is a choice of 2 image sizes: 720 x 405px and 720 x 540px. Images should be WebP file type, the file size should be no more than 50kb.
E	Primary price	The is the leading product price. This is optional as a product price may not always be available.
F	Secondary price	This is the secondary product price. This is also optional.
G	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>.
H	Expander	Expanders can be used to provide additional product detail. Each product should have a maximum of 3 expanders.
I	CTA	Keep the text short, relevant, and actionable. It should not exceed 24 characters.

Implementation

Placement

The ns-product-card component can only be used as a child of the <ns-column> element.

Specification

Attributes

keyline

Property

keyline

Description

The keyline colour to distinguish and attract attention to the product.

Type

string

Options

cyan lime navy blue forest slate orange red yellow

Default

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
image	<ns-image>	The image that needs to be related to the product.
name	<h2> <h3>	The name of the product. Heading level depends on its place in the semantics of the page.
price-heading	<h3> <h4>	The price heading of the product and the heading level needs to one level lower than the heading level of the product.
price	<div > ns-price>	The price of the product.
description	<div > p> <div > ul> <div > ol>	The description of the product and needs to be short and clear.
expander	<ns-expander>	The expander to provide additional product detail.
cta	<ns-cta>	The interactive content to link to the product page.

Figma

Please note: The ns-product-card Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).