Image
ReadyImage component that utilizes Widen APIs for formatting and optimization.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdImage } from '@fbin-web/neighborhood-core';
Usage
<nbhd-image
src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
alt="Kitchen sink with food prep">
</nbhd-image>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdImage } from '@fbin-web/neighborhood-react';
Usage
import { NbhdImage } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdImage
src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
alt="Kitchen sink with food prep"></NbhdImage>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
src | src | string | — | Image source URL. Widen URLs that already include query params are used as-is unless a preset or responsivePreset applies, in which case the preset's sizing and crop setting replace any in the URL (crop=false removes crop and k) and other params are preserved. |
alt | alt | string | — | Text alternative for the image. Defaults to empty, which marks the image as decorative: set alt="" explicitly for decorative images. Leaving alt out entirely logs a warning during development. |
cssClass | css-class | string | — | Optional CSS class applied to the rendered image element. |
loading | loading | lazyeager | eager | Controls whether the image loads immediately or lazily. |
width | width | stringnumber | — | Primary width used for the image unless a preset is supplied. |
height | height | stringnumber | auto | Primary height used for the image unless a preset is supplied. |
preset | — | ImageSize | — | Provider-agnostic target size that takes precedence over width and height. Overrides cdn.preset and cdn.sizes (cdn.quality still applies). Set by parent components such as Card and the Jumbotron logo, which also clear responsivePreset; when assigning preset directly, clear responsivePreset yourself or it will still take precedence. |
responsivePreset | — | ResponsiveImagePreset | — | Breakpoint sizes (sm, md, lg) for Widen-rendered images. Set by parent components such as Humongotron, Jumbotron, Minitron, and Hero Split, and takes precedence over cdn.sizes and cdn.preset. |
provider | provider | nonewiden | none | CDN provider used to optimize or transform the source image. |
imageFocus | image-focus | centertoptop-rightrightbottom-rightbottombottom-leftlefttop-left | center | Focal point used when Widen crops or resizes the image. |
crop | crop | boolean | false | Enables crop behavior for Widen-rendered images when used with imageFocus. Also aligns object-position with imageFocus when the image is scaled past its rendered size. |
cdn | — | CdnConfig | {} | Configuration object for Widen CDN behavior, including preset, sizes, and quality. When quality is not set, an authored q or quality URL param is kept; otherwise Widen images default to 90. |
responsive | responsive | boolean | false | Deprecated: Widen rendering is now selected by provider. |
picClass | pic-class | string | — | Deprecated: Widen images now render through the scoped Widen renderer. |
imgClass | img-class | string | — | Deprecated: no longer applied. Use `css-class` instead. |
breakpoints | breakpoints | boolean | false | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
smWidth | sm-width | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
smHeight | sm-height | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
mdWidth | md-width | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
mdHeight | md-height | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
lgWidth | lg-width | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
lgHeight | lg-height | string | — | Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources. |
No properties match.
CSS Parts
CSS parts that can be styled using the ::part() selector.
| Name | Description |
|---|---|
picture | The rendered <picture> element when Widen image rendering is enabled. |
image | The rendered <img> element for either standard or Widen-processed images. |
nbhd-image::part(picture) {
/* your styles */
}CSS Properties
Set these on nbhd-image or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
Image
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-image-blockSize | --nbhd-media-blockSize | 100% |
|
--nbhd-image-display | --nbhd-media-display | block |
|
--nbhd-image-inlineSize | --nbhd-media-inlineSize | 100% |
|
--nbhd-image-insetBlockEnd | --nbhd-media-insetBlockEnd | auto |
|
--nbhd-image-insetBlockStart | --nbhd-media-insetBlockStart | auto |
|
--nbhd-image-insetInlineEnd | --nbhd-media-insetInlineEnd | auto |
|
--nbhd-image-insetInlineStart | --nbhd-media-insetInlineStart | auto |
|
--nbhd-image-maxBlockSize | --nbhd-media-maxBlockSize | none |
|
--nbhd-image-maxInlineSize | --nbhd-media-maxInlineSize | 100% |
|
--nbhd-image-objectFit | --nbhd-media-objectFit | fill |
|
--nbhd-image-position | --nbhd-media-position | static |
|
--nbhd-image-transform | --nbhd-media-transform | none |
|
--nbhd-image-transitionDelay | --nbhd-media-transitionDelay | 0s |
|
--nbhd-image-transitionDuration | --nbhd-media-transitionDuration | 0s |
|
--nbhd-image-transitionProperty | --nbhd-media-transitionProperty | all |
|
--nbhd-image-transitionTimingFunction | --nbhd-media-transitionTimingFunction | ease |
No image match.
Media
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-media-blockSize | — | 100% |
|
--nbhd-media-display | — | block |
|
--nbhd-media-host-blockSize | — | 100% |
|
--nbhd-media-host-display | — | block |
|
--nbhd-media-host-inlineSize | — | 100% |
|
--nbhd-media-inlineSize | — | 100% |
|
--nbhd-media-insetBlockEnd | — | auto |
|
--nbhd-media-insetBlockStart | — | auto |
|
--nbhd-media-insetInlineEnd | — | auto |
|
--nbhd-media-insetInlineStart | — | auto |
|
--nbhd-media-maxBlockSize | — | none |
|
--nbhd-media-maxInlineSize | — | 100% |
|
--nbhd-media-objectFit | — | fill |
|
--nbhd-media-position | — | static |
|
--nbhd-media-transform | — | none |
|
--nbhd-media-transitionDelay | — | 0s |
|
--nbhd-media-transitionDuration | — | 0s |
|
--nbhd-media-transitionProperty | — | all |
|
--nbhd-media-transitionTimingFunction | --nbhd-motion-easing-standard | ease |
No media match.