Product Card
draft

...in progress

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
title title string The title of the card.
href href string The URL to navigate to when the card is clicked.
model model string The model number of the product.
price price string The price of the product.
noZoom no-zoom boolean false If true, the card will not zoom on hover.
reversed reversed boolean false If true, the card will be reversed.
alignment alignment left | center | right left The alignment of the card.
theme theme primary-light | primary-dark | secondary-light | secondary-dark primary-light The theme of the card.
finishes finishes array Content for finish items.

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.

CSS Parts

Name Description
base The component's base wrapper.

CSS Properties

Property Default Value
--nbhd-element default

Dependencies

This component contains the following components as dependencies.