Image
ready

Image component that utilizes Widen APIs for formatting and optimization.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdImage } from '@fbin-web/neighborhood-core';
<nbhd-image
  src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
  alt="Kitchen sink with food prep">
</nbhd-image>

React 

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.
alt alt string Accessible alt text for the image.
cssClass css-class string Optional CSS class applied to the rendered image element.
loading loading lazy | eager eager Controls whether the image loads immediately or lazily.
width width string | number Primary width used for the image unless a preset is supplied.
height height string | number 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.
provider provider none | widen none CDN provider used to optimize or transform the source image.
imageFocus image-focus center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-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.
cdn CdnConfig { quality: 90 } Configuration object for Widen CDN behavior, including preset, sizes, and quality.
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: use component-level CSS custom properties instead.
breakpoints Deprecated breakpoints boolean false Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
smWidth Deprecated sm-width string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
smHeight Deprecated sm-height string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
mdWidth Deprecated md-width string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
mdHeight Deprecated md-height string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
lgWidth Deprecated lg-width string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.
lgHeight Deprecated lg-height string Deprecated: use cdn.preset or cdn.sizes for Widen responsive sources.

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.