Finish
ready

A visual component for displaying color swatches.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdFinish } from '@fbin-web/neighborhood-core';
<nbhd-finish
  name="Chrome"
  model="64430"
  variant="51371978785078"
  href="https://shop.moen.com/products/64430"
  image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png"
  label="finish">
</nbhd-finish>

React 

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

const App = () => (
  <>
    <NbhdFinish
      name="Chrome"
      model="64430"
      variant="51371978785078"
      href="https://shop.moen.com/products/64430"
      image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png"
      label="finish"></NbhdFinish>
  </>
);

Properties

Property Attribute Type Default Description
href href string Specifies the URL to link to when the finish is clicked.
variant object An object containing variant data.
name name string The name of the finish.
image image string The URL of the finish image.
model model string The model number of the finish.
shape shape circle | square circle The shape of the finish.
active active boolean false Whether the finish is active and selected.

CSS Parts

Name Description
base The component's base wrapper.
image The finish image.
link Link wrapping finish image.

CSS Properties

Property Default Value
--nbhd-finish-host-display block
--nbhd-finish-blockSize var(--nbhd-space-7, 28px)
--nbhd-finish-borderColor #333
--nbhd-finish-borderColor-active dodgerblue
--nbhd-finish-borderColor-hover deepskyblue
--nbhd-finish-borderRadius 50%
--nbhd-finish-borderStyle solid
--nbhd-finish-borderWidth 2px
--nbhd-finish-inlineSize var(--nbhd-space-7, 28px)
--nbhd-finish-marginBlock 0
--nbhd-finish-marginInline 0
--nbhd-finish-maxInlineSize var(--nbhd-space-7, 28px)
--nbhd-finish-maxBlockSize var(--nbhd-space-7, 28px)
--nbhd-finish-transitionDuration 0.5s
--nbhd-finish-transitionProperty border-color
--nbhd-finish-transitionTimingFunction ease
--nbhd-finish-link-display block
--nbhd-finish-overflow hidden
--nbhd-finish-image-display block
--nbhd-finish-image-transform scale(1.109)