Product Card
ready

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

icon-storybook-default Open in Storybook
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"
    theme="light">
    Product Name/Description
  </nbhd-text>

  <nbhd-text
    slot="model"
    tag="div"
    theme="light">
    64430
  </nbhd-text>

  <nbhd-text
    slot="price"
    tag="div"
    theme="light">
    $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"
        theme="light">
        Product Name/Description
      </NbhdText>

      <NbhdText
        slot="model"
        tag="div"
        theme="light">
        64430
      </NbhdText>

      <NbhdText
        slot="price"
        tag="div"
        theme="light">
        $99.99
      </NbhdText>
    </NbhdProductCard>
  </>
);

Properties

Property Attribute Type Default Description
model model string The model number of the product.
href href string The URL to navigate to when the card is clicked.
cssClass css-class string Additional CSS classes to apply to the component.
discontinued discontinued boolean false Whether the product is discontinued.
variant variant object Data for product variants.

Slots

Name Description
title product title.
model product model number.
price product price.
status status of the product
badge badge to display on the card, typically used for exclusives.
media main product image.
media-secondary secondary product image, displayed on hover.
media-finish-image

CSS Properties

Property Default Value
--nbhd-productCard-backgroundColor none
--nbhd-productCard-blockSize 100%
--nbhd-productCard-borderColor transparent
--nbhd-productCard-borderStyle solid
--nbhd-productCard-borderWidth 1px
--nbhd-productCard-boxShadow none
--nbhd-productCard-display flex
--nbhd-productCard-flexDirection column
--nbhd-productCard-maxInlineSize 100%
--nbhd-productCard-overflow hidden
--nbhd-productCard-paddingBlock var(--nbhd-space-5, 20px)
--nbhd-productCard-paddingInline var(--nbhd-space-5, 20px)
--nbhd-productCard-position relative
--nbhd-productCard-transitionDuration 0.5s
--nbhd-productCard-transitionProperty border-color
--nbhd-productCard-transitionTimingFunction ease

Dependencies

This component contains the following components as dependencies.