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

Product Title

The Product Title is commonly used on Product Details Page (PDP). It usually wraps the product name, a product label and the rating.

Overview


Import

Import the component from @faststore/ui

import { ProductTitle } 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/ProductTitle/styles.scss';
@import '@faststore/ui/src/components/molecules/Rating/styles.scss';

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


Usage

Apple Magic Mouse

10% off
Ref.: 99995945
<ProductTitle
  title={<h1>Apple Magic Mouse</h1>}
  label={<DiscountBadge size="big" listPrice={100} spotPrice={90} />}
  refNumber="99995945"
  ratingValue={4.5}
/>

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-title
title*string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA react component to be used as the product title, e.g. a `h1`
labelstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA react component to be used as the product label, e.g. a `DiscountBadge`
refTagstringLabel for reference.Ref.:
refNumberstringA text to be used below the title and the label, such as the product's reference number.
ratingValuenumberThe current value of the rating, a number from 0 to 5.

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-title-text-sizevar(--fs-text-size-title-product)
--fs-product-title-text-weightvar(--fs-text-weight-regular)
--fs-product-title-line-height1.12
--fs-product-title-column-gapvar(--fs-spacing-2)
--fs-product-title-row-gapvar(--fs-spacing-3)

Nested Elements

Addendum

Local tokenDefault value/Global token linked
--fs-product-title-addendum-color
var(--fs-color-text-light)
--fs-product-title-addendum-sizevar(--fs-text-size-1)
--fs-product-title-addendum-line-height1.7

Customization

For further customization, you can use the following data attributes:

data-fs-product-title

data-fs-product-title-header

data-fs-product-title-addendum