⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/molecules/ProductCard/styles.scss';
@import '@faststore/ui/src/components/molecules/DiscountBadge/styles.scss';
@import '@faststore/ui/src/components/molecules/Rating/styles.scss';
@import '@faststore/ui/src/components/atoms/Badge/styles.scss';
@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/atoms/Link/styles.scss';
@import '@faststore/ui/src/components/atoms/Price/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

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 the ProductCard component.
pricePriceDefinitionSpecifies product's prices.
outOfStockfalse | trueEnables an outOfStock status.
outOfStockLabelstringSpecifies the OutOfStock badge's label.Out of stock
ratingValuenumberSpecifies the Rating Value of the product.
buttonLabelstringSpecifies the button's label.Add
showDiscountBadgefalse | trueEnables a DiscountBadge to the component.
onButtonClick() => voidCallback function when the button is clicked.
includeTaxesfalse | trueSpecifies whether the displayed price should include taxes.false
includeTaxesLabelstringLabel to determine if the price includes taxes.Tax included

Other Resources

PriceDefinition

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-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-border-color
var(--fs-color-neutral-1)
--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 Price