Product Card
ready

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

Usage

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

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdProductCard } from '@fbin-web/neighborhood-core';
<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>

React 

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>
  </>
);

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 start | center | end center The alignment of the card content.
surface surface none | primary | secondary | inverse | inverse-secondary primary The surface theme of the card.
reverse reverse boolean false If true, the card layout will be reversed.
aspectRatio aspect-ratio square | landscape | portrait 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 stacked | inline | featured stacked The layout of the card.
ariaLabel aria-label string The accessible label for the card when it is clickable.
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 function | undefined The action to execute when the card is clicked. Requires clickable to be true.
badges string[] The badges to display on the product card.
product ProductContent | null The product content used to display product details.
identifier identifier string | undefined The product identifier.
identifierLabel identifier-label string | undefined 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 image | video Yes The type of media content.
crop boolean No Enable cropping for the media.
imageFocus center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-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.
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.

Dependencies

This component contains the following components as dependencies.