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

Name	Type	Description	Default
testId	`string`	ID 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> \| ReactPortal`	A react component to be used as the product title, e.g. a `h1`
label	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A react component to be used as the product label, e.g. a `DiscountBadge`
refTag	`string`	Label for reference.	`Ref.:`
refNumber	`string`	A text to be used below the title and the label, such as the product's reference number.
ratingValue	`number`	The current value of the rating, a number from 0 to 5.

Design Tokens

Local token	Default value/Global token linked
`--fs-product-title-text-size`	`var(--fs-text-size-title-product)`
`--fs-product-title-text-weight`	`var(--fs-text-weight-regular)`
`--fs-product-title-line-height`	`1.12`
`--fs-product-title-column-gap`	`var(--fs-spacing-2)`
`--fs-product-title-row-gap`	`var(--fs-spacing-3)`

Nested Elements

Addendum

Local token	Default value/Global token linked
`--fs-product-title-addendum-color`	`var(--fs-color-text-light)`
`--fs-product-title-addendum-size`	`var(--fs-text-size-1)`
`--fs-product-title-addendum-line-height`	`1.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

Product Price Quantity Selector