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
import '@faststore/ui/src/components/molecules/ProductTitle/styles.scss'Usage
Apple Magic Mouse
10% off
<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 |
|---|---|---|---|
| Coming Soon |
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