Product Card
ready
Product Card is a compact tile of information about a product.
Loading
Code
HTML
import { NbhdProductCard } from '@fbin-web/neighborhood-core';<nbhd-product-card href="https://shop.moen.com/products/64430" model="64430">
<nbhd-image width="300" height="300" crop="" responsive="" position="center" slot="media"
src="https://moen.widen.net/content/ds4ntia5eh/jpeg/64432BL.jpg"
alt="Product Image for Product Name/Description - 64430">
</nbhd-image>
<nbhd-text tag="h3" slot="title">
Product Name/Description
</nbhd-text>
<nbhd-text slot="model" tag="div">
64430
</nbhd-text>
<nbhd-text slot="price" tag="div">
$99.99
</nbhd-text>
</nbhd-product-card>React
import { NbhdProductCard, NbhdImage, NbhdText } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdProductCard
href="https://shop.moen.com/products/64430"
model="64430">
<NbhdImage
width="300"
height="300"
crop=""
responsive=""
position="center"
slot="media"
src="https://moen.widen.net/content/ds4ntia5eh/jpeg/64432BL.jpg"
alt="Product Image for Product Name/Description - 64430"></NbhdImage>
<NbhdText
tag="h3"
slot="title">
Product Name/Description
</NbhdText>
<NbhdText
slot="model"
tag="div">
64430
</NbhdText>
<NbhdText
slot="price"
tag="div">
$99.99
</NbhdText>
</NbhdProductCard>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
model
|
model
|
string
|
The model number of the product. | |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to the component. | |
discontinued
|
discontinued
|
boolean
|
false
|
Whether the product is discontinued. |
variant
|
ProductVariantData | null
|
Data for product variants. This property is not settable via attribute. | ||
href
|
href
|
string
|
The URL to navigate to when the card is clicked. | |
external
|
external
|
boolean
|
false
|
Whether the link opens in a new tab/window. |
clickableAction
|
clickable-action
|
() => void
|
Function to execute when the card is clicked (alternative to href). | |
shadow
|
shadow
|
boolean
|
false
|
Whether to apply a shadow to the card. |
noZoom
|
no-zoom
|
boolean
|
false
|
Disables the zoom effect on hover. |
clickable
|
clickable
|
boolean
|
false
|
Makes the entire card clickable. |
overlay
|
overlay
|
boolean
|
false
|
Adds an overlay effect to the card. |
size
|
size
|
small | medium | large | xlarge
|
small
|
The size of the card. |
orientation
|
orientation
|
square | landscape | portrait
|
landscape
|
The orientation/aspect ratio of the card. |
condensed
|
condensed
|
boolean
|
false
|
Applies condensed spacing to the card. |
alignment
|
alignment
|
left | center | right
|
center
|
Horizontal alignment of the card content. |
reversed
|
reversed
|
boolean
|
false
|
Reverses the layout of the card elements. |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background theme color for the card. |
Variant Structure
Structure for ProductVariantData objects used in the variant property.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | The title of the product variant. |
model
|
string
|
No | The model number of the product variant. |
image
|
Media
|
No | The image data for the product variant. |
status
|
string
|
No | The status text of the product variant. |
statusType
|
string
|
No | The type of status for styling purposes. |
statusLabel
|
string
|
No | The label text for the status. |
Media Structure
Structure for Media objects used in variant image property.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | The source URL of the media. |
alt
|
string
|
Yes | The alternative text for the media. |
class
|
string
|
No | Additional CSS classes to apply to the media element. |
type
|
image | video
|
Yes | The type of media content. |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | The crop position for the media. |
Events
| Name | Description | Event Detail |
|---|---|---|
nbhd-productcard-click
|
Emitted when the product card link is clicked. | { from: string, item: ProductCardElement, originalEvent: LinkClickDetail } |
Slots
| Name | Description |
|---|---|
title
|
Product title content. |
model
|
Product model number content. |
price
|
Product price content. |
status
|
Product status content (hidden when variant is active). |
status-variant
|
Product status content for variant state (shown when variant is active). |
exclusive
|
Exclusive badge content to display on the card, typically used for special product designations. |
media
|
Main product image content. |
media-secondary
|
Secondary product image content, displayed on hover. |
media-finish-image
|
Finish-specific product image content, shown when no variant is active. |
finish
|
Product finish options content, typically used for finish selection components. |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
visual
|
The visual section containing media content. |
detail
|
The detail section containing text content (title, model, price, etc.). |
media
|
The main product image slot area. |
media-secondary
|
The secondary product image slot area. |
media-finish-image
|
The finish-specific product image slot area. |
title
|
The product title slot area. |
title-link
|
The link wrapper around the title (when href is provided). |
media-link
|
The link wrapper around the media content (when href is provided). |
finish
|
The product finishes slot area. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-productCard-backgroundColor
|
none |
--nbhd-productCard-blockSize
|
var(--nbhd-card-blockSize, 100%) |
--nbhd-productCard-borderColor
|
transparent |
--nbhd-productCard-borderColor-hover
|
transparent |
--nbhd-productCard-borderStyle
|
solid |
--nbhd-productCard-borderWidth
|
1px |
--nbhd-productCard-boxShadow
|
none |
--nbhd-productCard-display
|
var(--nbhd-card-display, flex) |
--nbhd-productCard-flexDirection
|
var(--nbhd-card-flexDirection, column) |
--nbhd-productCard-maxInlineSize
|
var(--nbhd-card-maxInlineSize, 100%) |
--nbhd-productCard-overflow
|
var(--nbhd-card-overflow, hidden) |
--nbhd-productCard-paddingBlock
|
var(--nbhd-space-5, 20px) |
--nbhd-productCard-paddingInline
|
var(--nbhd-space-5, 20px) |
--nbhd-productCard-position
|
var(--nbhd-card-position, relative) |
--nbhd-productCard-textAlign
|
center |
--nbhd-productCard-transitionDuration
|
0.5s |
--nbhd-productCard-transitionProperty
|
border-color |
--nbhd-productCard-transitionTimingFunction
|
ease |
--nbhd-productCard-media-zIndex
|
-1 |
--nbhd-productCard-mediaMain-opacity
|
1 |
--nbhd-productCard-mediaSecondary-opacity
|
0 |
--nbhd-productCard-status-alignItems
|
start |
--nbhd-productCard-status-backgroundColor
|
transparent |
--nbhd-productCard-status-backgroundColorOpacity
|
0.45 |
--nbhd-productCard-status-blockSize
|
auto |
--nbhd-productCard-status-display
|
block |
--nbhd-productCard-status-inlineSize
|
auto |
--nbhd-productCard-status-inset
|
auto |
--nbhd-productCard-status-justifyContent
|
start |
--nbhd-productCard-status-pointerEvents
|
none |
--nbhd-productCard-status-position
|
absolute |
--nbhd-productCard-status-zIndex
|
2 |
--nbhd-productCard-status-badge-maxInlineSize
|
auto |
--nbhd-productCard-status-badge-position
|
absolute |
--nbhd-productCard-title-color
|
inherit |
--nbhd-productCard-title-color-hover
|
inherit |
--nbhd-productCard-title-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-productCard-title-textDecoration
|
none |
--nbhd-productCard-title-textTransform
|
capitalize |
--nbhd-productCard-exclusive-borderColor
|
var(--nbhd-color-black) |
--nbhd-productCard-exclusive-borderColor-dark
|
var(--nbhd-color-white) |
--nbhd-productCard-exclusive-color
|
inherit |
--nbhd-productCard-model-color
|
inherit |
--nbhd-productCard-price-color
|
inherit |