Product Card

Ready

Product Card is a compact tile of information about a product.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdProductCard } from '@fbin-web/neighborhood-core';

Usage

<nbhd-product-card
  aspect-ratio="square"
  href="https://shop.moen.com/products/64430"
  identifier="1234CH"
  alignment="center"
  surface="primary">
  <nbhd-image
    width="300"
    provider="widen"
    height="300"
    crop=""
    responsive=""
    image-focus="center"
    loading="lazy"
    slot="media"
    src="https://placehold.co/300x300@2x.png?text=Main"
    alt="Product Image for one-handle high arc bathroom faucet - 1234CH">
  </nbhd-image>

  <nbhd-image
    width="300"
    height="300"
    provider="widen"
    crop=""
    responsive=""
    image-focus="center"
    aria-hidden="true"
    slot="media-alternate"
    src="https://placehold.co/300x300@2x.png?text=Hover"
    alt="Alternate Product Image for one-handle high arc bathroom faucet - 1234CH">
  </nbhd-image>

  <nbhd-text
    tag="h3"
    slot="title">
    one-handle high arc bathroom faucet
  </nbhd-text>

  <nbhd-text
    slot="identifier"
    tag="span">
    1234CH
  </nbhd-text>

  <nbhd-text
    slot="price"
    tag="div">
    $99.99 - $499.99
  </nbhd-text>

  <nbhd-finish
    slot="product-option"
    name="Chrome"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234CH"
    image="https://moen.widen.net/content/3d7ihxrfrz/jpeg/chrome_100.jpeg"
    active="">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="Matte Black"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234BL"
    image="https://moen.widen.net/content/6kgdjugniw/png/black_100.png">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="Brushed Nickel"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234BN"
    image="https://moen.widen.net/content/gicpetnrh6/png/brushed_nickel_100.png">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="Oil Rubbed Bronze"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234ORB"
    image="https://moen.widen.net/content/8v7bnmmfok/png/oil_rubbed_bronze_100.png">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="Brushed Gold"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234BG"
    image="https://moen.widen.net/content/r9lgtpuzuj/png/brushed_gold_100.png">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="White"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234WH"
    image="https://moen.widen.net/content/mdhhn8qalr/png/white_100.png">
  </nbhd-finish>

  <nbhd-finish
    slot="product-option"
    name="Stainless Spot Resist"
    href="https://shop.moen.com/products/64430?variant=51371978850614"
    identifier="1234SSR"
    image="https://moen.widen.net/content/3cyx5y06ko/png/stainless_spot_resist_100.png">
  </nbhd-finish>
</nbhd-product-card>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdProductCard } from '@fbin-web/neighborhood-react';

Usage

import { NbhdProductCard, NbhdImage, NbhdText, NbhdFinish } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdProductCard
      aspectRatio="square"
      href="https://shop.moen.com/products/64430"
      identifier="1234CH"
      alignment="center"
      surface="primary">
      <NbhdImage
        width="300"
        provider="widen"
        height="300"
        crop
        imageFocus="center"
        loading="lazy"
        slot="media"
        src="https://placehold.co/300x300@2x.png?text=Main"
        alt="Product Image for one-handle high arc bathroom faucet - 1234CH"></NbhdImage>

      <NbhdImage
        width="300"
        height="300"
        provider="widen"
        crop
        imageFocus="center"
        ariaHidden="true"
        slot="media-alternate"
        src="https://placehold.co/300x300@2x.png?text=Hover"
        alt="Alternate Product Image for one-handle high arc bathroom faucet - 1234CH"></NbhdImage>

      <NbhdText
        tag="h3"
        slot="title">
        one-handle high arc bathroom faucet
      </NbhdText>

      <NbhdText
        slot="identifier"
        tag="span">
        1234CH
      </NbhdText>

      <NbhdText
        slot="price"
        tag="div">
        $99.99 - $499.99
      </NbhdText>

      <NbhdFinish
        slot="product-option"
        name="Chrome"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234CH"
        image="https://moen.widen.net/content/3d7ihxrfrz/jpeg/chrome_100.jpeg"
        active=""></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="Matte Black"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234BL"
        image="https://moen.widen.net/content/6kgdjugniw/png/black_100.png"></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="Brushed Nickel"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234BN"
        image="https://moen.widen.net/content/gicpetnrh6/png/brushed_nickel_100.png"></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="Oil Rubbed Bronze"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234ORB"
        image="https://moen.widen.net/content/8v7bnmmfok/png/oil_rubbed_bronze_100.png"></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="Brushed Gold"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234BG"
        image="https://moen.widen.net/content/r9lgtpuzuj/png/brushed_gold_100.png"></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="White"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234WH"
        image="https://moen.widen.net/content/mdhhn8qalr/png/white_100.png"></NbhdFinish>

      <NbhdFinish
        slot="product-option"
        name="Stainless Spot Resist"
        href="https://shop.moen.com/products/64430?variant=51371978850614"
        identifier="1234SSR"
        image="https://moen.widen.net/content/3cyx5y06ko/png/stainless_spot_resist_100.png"></NbhdFinish>
    </NbhdProductCard>
  </>
);

Usage

Product Card is an extension of Card component and includes additional features specific to product display.

Properties

Property	Attribute	Type	Default	Description
`cssClass`	`css-class`	`string`	—	Additional CSS class names to apply to the card.
`shadow`	`shadow`	`boolean`	`false`	If true, the card will have a shadow.
`alignment`	`alignment`	`startcenterend`	`center`	The alignment of the card content.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	The surface theme of the card.
`reverse`	`reverse`	`boolean`	`false`	If true, the card layout will be reversed.
`aspectRatio`	`aspect-ratio`	`squarelandscapeportrait`	`landscape`	The aspect ratio of the card media.
`zoom`	`zoom`	`boolean`	`false`	If true, the card media will zoom on hover.
`mediaInset`	`media-inset`	`boolean`	`false`	If true, the card media will have an inset style.
`layout`	`layout`	`stackedinlinefeatured`	`stacked`	The layout of the card.
`ariaLabel`	`aria-label`	`string`	—	Overrides the accessible name of a clickable card. The card is otherwise named by its visible title, so only set this when needed, and start it with the visible title text (WCAG 2.5.3 Label in Name).
`clickable`	`clickable`	`boolean`	`false`	If true, the card will be rendered as a link or button.
`href`	`href`	`string`	—	The URL for the card link when `clickable` is true.
`external`	`external`	`boolean`	`false`	If true, the card link will open externally when `href` is provided.
`action`	—	`functionundefined`	—	The action to execute when the card is clicked. Requires clickable to be true. A transparent button stretched over the card takes the click, so the card’s title keeps its heading semantics; the button is named by the title.
`badges`	—	`string[]`		The badges to display on the product card. Badges that don’t fit on one line wrap rather than being cut off.
`product`	—	`ProductContentnull`	—	The product content used to display product details.
`identifier`	`identifier`	`stringundefined`	—	The product identifier.
`identifierLabel`	`identifier-label`	`stringundefined`	`Model`	The label displayed before the product identifier.
`noIdentifierLabel`	`no-identifier-label`	`boolean`	`false`	If true, the product identifier label will not be displayed.

Product Content Structure

Structure for ProductContent objects used in the product property.

Property	Type	Required	Description
`title`	`string`	No	The title of the product content.
`identifier`	`string`	No	The identifier of the product content.
`image`	`MediaContent`	No	The image data for the product content.
`badges`	`string[]`	No	The badges to display for the product content.

MediaContent Structure

Structure for MediaContent objects used in the product option image property.

Property	Type	Required	Description
`src`	`string`	Yes	The source URL of the media.
`alt`	`string`	Yes	The alternative text for the media.
`cssClass`	`string`	No	Additional CSS classes to apply to the media element.
`type`	`imagevideo`	Yes	The type of media content.
`crop`	`boolean`	No	Enable cropping for the media.
`imageFocus`	`centertoptop-rightrightbottom-rightbottombottom-leftlefttop-left`	No	The focal point for the media image.

Events

Name	Description	Event Detail
`nbhd-productcard-click`	Emitted when the product card link is clicked.	`{ from: 'product-card', item: ProductCardContent, originalEvent: LinkClickDetail }`

Slots

Name	Description
`media`	Main product image content.
`media-alternate`	Alternate product image content, displayed when provided.
`media-option-image`	Product option image content, displayed when a product option is active.
`title`	Product title content.
`identifier`	Product identifier content.
`price`	Product price content.
`product-option`	Product option content, such as finish selection components.

CSS Parts

Name	Description
`base`	The component's base wrapper.
`visual`	The visual section containing media content.
`badges`	The badges container overlaid on the top-start of the visual.
`detail`	The detail section containing title, identifier, price, and product option content.
`media`	The main product image slot area.
`media-alternate`	The alternate product image slot area.
`media-option-image`	The product option image slot area.
`media-link`	The link wrapper around the media content when href is provided.
`title-link`	The link wrapper around the title when href is provided.
`title`	The product title slot area.
`product-option`	The product option content area.

nbhd-product-card::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-product-card or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Product card

Property	Token	Value
`--nbhd-productCard-alignment`	—	`center`
`--nbhd-productCard-badges-gap`	`--nbhd-space-1`	`4px`
`--nbhd-productCard-badges-insetBlockStart`	`--nbhd-space-0`	`0px`
`--nbhd-productCard-badges-insetInline`	`--nbhd-space-0`	`0px`
`--nbhd-productCard-badges-offset`	`--nbhd-space-7`	`28px`
`--nbhd-productCard-badges-zIndex`	—	`2`
`--nbhd-productCard-borderWidth`	`--nbhd-border-width-subtle`	`1px`
`--nbhd-productCard-hover-borderColor`	`--nbhd-card-borderColor`	`transparent`
`--nbhd-productCard-identifier-color`	—	`inherit`
`--nbhd-productCard-identifier-fontSize`	`--nbhd-typography-bodySmall-fontSize`	`0.875rem`
`--nbhd-productCard-identifier-fontWeight`	`--nbhd-typography-bodySmall-fontWeight`	`400`
`--nbhd-productCard-identifier-letterSpacing`	—	`normal`
`--nbhd-productCard-identifier-lineHeight`	`--nbhd-typography-bodySmall-lineHeight`	`1`
`--nbhd-productCard-identifier-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-productCard-maxInlineSize`	`--nbhd-card-maxInlineSize`	`100%`
`--nbhd-productCard-media-alternate-opacity`	—	`0`
`--nbhd-productCard-media-main-opacity`	—	`1`
`--nbhd-productCard-media-option-opacity`	—	`0`
`--nbhd-productCard-media-zIndex`	`--nbhd-z-ground`	`0`
`--nbhd-productCard-paddingBlock`	`--nbhd-space-5`	`20px`
`--nbhd-productCard-paddingInline`	`--nbhd-space-5`	`20px`
`--nbhd-productCard-price-color`	—	`inherit`
`--nbhd-productCard-price-fontSize`	`--nbhd-typography-bodySmall-fontSize`	`0.875rem`
`--nbhd-productCard-price-fontWeight`	`--nbhd-typography-bodySmall-fontWeight`	`400`
`--nbhd-productCard-price-letterSpacing`	—	`normal`
`--nbhd-productCard-price-lineHeight`	`--nbhd-typography-bodySmall-lineHeight`	`1`
`--nbhd-productCard-price-marginBlock`	`--nbhd-space-4`	`16px`
`--nbhd-productCard-productOptions-gridGap`	`--nbhd-space-2`	`8px`
`--nbhd-productCard-productOptions-gridTemplateColumns`	—	`repeat(auto-fit, 28px)`
`--nbhd-productCard-productOptions-marginBlock`	`--nbhd-space-4 --nbhd-space-0`	`16px 0px`
`--nbhd-productCard-title-color`	—	`inherit`
`--nbhd-productCard-title-fontSize`	`--nbhd-typography-subheading-fontSize`	`1.125rem`
`--nbhd-productCard-title-fontWeight`	`--nbhd-typography-subheading-fontWeight`	`700`
`--nbhd-productCard-title-letterSpacing`	—	`normal`
`--nbhd-productCard-title-lineHeight`	`--nbhd-typography-subheading-lineHeight`	`1.3`
`--nbhd-productCard-title-marginBlock`	`--nbhd-space-0 --nbhd-space-5`	`0px 20px`
`--nbhd-productCard-title-textDecoration`	—	`none`
`--nbhd-productCard-title-textTransform`	—	`capitalize`
`--nbhd-productCard-transitionDuration`	`--nbhd-motion-duration-slow`	`0.5s`
`--nbhd-productCard-transitionProperty`	—	`border-color`
`--nbhd-productCard-transitionTimingFunction`	`--nbhd-motion-easing-standard`	`ease`

Badge

Property	Token	Value	Copy
`--nbhd-badge-fontSize`	`--nbhd-typography-badge-fontSize`	`0.625rem`
`--nbhd-badge-lineHeight`	`--nbhd-typography-badge-lineHeight`	`1`

Card

Property	Token	Value	Copy
`--nbhd-card-maxInlineSize`	—	`100%`

Dependencies

Child components <nbhd-product-card> renders internally. Import them too when you tree-shake.

CardReady <nbhd-card> ImageReady <nbhd-image> LinkReady <nbhd-link> TextReady <nbhd-text> FinishReady <nbhd-finish>

Used by

AutosuggestReady <nbhd-autosuggest> Card ListReady <nbhd-card-list>