Skip to content
Nucleus Docs

Product card

<ns-product-card>
Overview Guidance Implementation

Overview

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

Examples

Configure

Guidance

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 of the product card.
Type
cyan lime navy blue forest slate orange red yellow
Default

type

Property
type
Type
string
Default
standard

Slots

SlotPermitted tagsDescription
image<ns-image> The image of the product card.
highlight<p> The highlight of the product card.
name<h2> <h3> The name of the product card.
price-heading<h3> <h4> The price heading of the product card.
price<div> The price of the product card.
description<div> The description of the product card.
expander<ns-expander> The expander of the product card.
cta<ns-cta> The CTA of the product card.

This page covers most of the ways you can use ns-product-card. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: