ProductTitle
Wraps the product name, a product label and the rating.
The
ProductTitle is a component commonly used on Product Details Page (PDP). It wraps the product name, a product label and the rating.Example
Code
Apple Magic Mouse
10% off
Usage
Import the component
_10import { ProductTitle } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Example
Code
Apple Magic Mouse
10% off
Example
Code
Handmade Steel Pants Gorgeous
10% off
Example
Code
Handmade Steel Pants Gorgeous
10% off
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) |
Design tokens: 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 |
Data attributes
You can target and override
ProductTitle styles using the following data attributes:data-fs-product-titledata-fs-product-title-headerdata-fs-product-title-addendumProps
| 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. |