Finish
ready
A visual component for displaying color swatches.
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
|
ProductVariantData
|
An object containing variant data. | ||
name
|
name
|
string
|
The name of the finish. | |
model
|
model
|
string
|
The model number of the finish. | |
image
|
image
|
string
|
The URL of the finish image. | |
shape
|
shape
|
circle | square
|
circle
|
The shape of the finish. |
label
|
label
|
string
|
finish
|
The label for the finish. |
active
|
active
|
boolean
|
false
|
Whether the finish is active and selected. |
Variant Data Structure
The ProductVariantData interface defines the structure for variant data used with finish components.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | The title of the product variant. |
model
|
string
|
No | The model number or identifier for the variant. |
image
|
Media
|
No | Media object containing image/video data. See Media Structure section for details. |
status
|
string
|
No | The current status of the variant (e.g., 'available', 'discontinued'). |
statusType
|
string
|
No | The type classification for the status. |
statusLabel
|
string
|
No | A human-readable label for the status. |
Media Structure
The Media interface defines the structure for media objects used in variant data.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | The source URL of the media file. |
alt
|
string
|
Yes | Alternative text for the media, used for accessibility. |
class
|
string
|
No | Additional CSS class to apply to the media element. |
type
|
image | video
|
Yes | The type of media content. |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | The crop position for the media when displayed. |
Events
| Name | Description | Event Detail |
|---|---|---|
finish-hover
Deprecated
|
Emitted when the mouse enters the finish component. | { variant: ProductVariantData } |
nbhd-finish-hover
|
Emitted when the mouse enters the finish component. | { variant: ProductVariantData } |
finish-hover-out
Deprecated
|
Emitted when the mouse leaves the finish component. | {} |
nbhd-finish-hover-out
|
Emitted when the mouse leaves the finish component. | {} |
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
|
var(--nbhd-color-blue) |
--nbhd-finish-borderColor-hover
|
var(--nbhd-color-highlightSecondary) |
--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) |