UI Components
Molecules
Product Card

Product Card

Displays summarized information about a product. They usually present a call-to-action button, as well as the product's name, price, and image.

The ProductCard is a compound of the following:

  • ProductCardImage: wraps the product's image.
  • ProductCardContent: wraps the content's details.

Overview

Import

Import the component from @faststore/ui

import {
  ProductCard,
  ProductCardImage,
  ProductCardContent,
} from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/ProductCard/styles.scss'

Usage

Props

All product card related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

Product Card

NameTypeDescriptionDefault
borderedfalse | trueSets a border to the component.false
variant"wide" | "default"Sets the component's size.default
outOfStockfalse | trueEnables a outOfStock status.
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-product-card

Product Card Image

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-image
aspectRationumberSpecifies the ProductCard image's aspect ratio.1

Product Card Content

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-content
title*stringSpecifies the product's title.
linkPropsPartial<LinkProps<LinkElementType>>Props for the link from ProductCard component.
pricePriceDefinitionSpecifies product's prices.
outOfStockfalse | trueEnables a outOfStock status.
outOfStockLabelstringSpecifies the OutOfStock badge's label.Out of stock
ratingValuenumberSpecifies Rating Value of the product.
buttonLabelstringSpecifies the button's label.Add
showDiscountBadgefalse | trueEnables a DiscountBadge to the component.
onButtonClick() => voidCallback function when button is clicked.

Price Definition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-card-paddingvar(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1)
--fs-product-card-min-width10rem
--fs-product-card-shadowvar(--fs-shadow)
--fs-product-card-shadow-hovervar(--fs-shadow-hover)
--fs-product-card-bkg-color
var(--fs-color-body-bkg)
--fs-product-card-bkg-color-hover
var(--fs-product-card-bkg-color)
--fs-product-card-bkg-color-focus
var(--fs-product-card-bkg-color-hover)
--fs-product-card-border-radiusvar(--fs-border-radius)
--fs-product-card-border-color-hover
var(--fs-border-color-hover)
--fs-product-card-transition-functionvar(--fs-transition-function)
--fs-product-card-transition-propertyvar(--fs-transition-property)
--fs-product-card-transition-timingvar(--fs-transition-timing)

Nested Elements

Image

Local tokenDefault value/Global token linked
--fs-product-card-img-radiusvar(--fs-product-card-border-radius)
--fs-product-card-img-scale-hover1

Title

Local tokenDefault value/Global token linked
--fs-product-card-title-color
var(--fs-color-text)
--fs-product-card-title-sizevar(--fs-text-size-base)
--fs-product-card-title-weightvar(--fs-text-weight-regular)
--fs-product-card-title-max-linesvar(--fs-text-max-lines)

Price

Local tokenDefault value/Global token linked
--fs-product-card-price-gapvar(--fs-spacing-1)
--fs-product-card-price-color
var(--fs-color-text)
--fs-product-card-price-sizevar(--fs-text-size-base)

Variants

Default

Out of Stock

To replicate this style, add outOfStock prop on both ProductCard and ProductCardContent.

Local tokenDefault value/Global token linked
--fs-product-card-out-of-stock-bkg-color
var(--fs-color-disabled-bkg)
--fs-product-card-out-of-stock-img-opacity.5

Bordered

Local tokenDefault value/Global token linked
--fs-product-card-border-widthvar(--fs-border-width)
--fs-product-card-border-color
var(--fs-border-color-light)

Wide

Prefer using buyButton or discountBadge, never both.

Local tokenDefault value/Global token linked
--fs-product-card-wide-padding0
--fs-product-card-wide-content-paddingvar(--fs-spacing-2)
--fs-product-card-wide-min-width9rem
--fs-product-card-wide-bkg-color
var(--fs-color-neutral-bkg)

Use Cases

Use the ProductCard to:

  • Present a product collection on the home page.
  • Present product details on PLPs.
  • Build a product slider that showcases multiple products at once, making it easier for visitors to browse your online store.

Customization

data-fs-product-card

data-fs-product-card-bordered="true"

data-fs-product-card-variant="default | wide"

data-fs-product-card-image

data-fs-product-card-content

data-fs-product-card-heading

data-fs-product-card-title

data-fs-product-card-prices

data-fs-product-card-actions

Related components

Order SummaryProduct Title