Image
ready
Image component that utilizes Widen APIs for formatting and optimization.
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. | |
alt
|
alt
|
string
|
Alternative text for image. | |
imgClass
|
img-class
|
string
|
Additional CSS class(es) to apply to image element. | |
picClass
|
pic-class
|
string
|
Additional CSS class(es) to apply to picture element. | |
loading
|
loading
|
lazy | eager
|
eager
|
Controls the loading behavior of the image. Use 'lazy' for images that should load when they come into view, or 'eager' for immediate loading. |
responsive
|
responsive
|
boolean
|
false
|
Enable responsive image behavior with srcset for different screen sizes. |
breakpoints
|
breakpoints
|
boolean
|
false
|
Enable breakpoint-based responsive images using defined small, medium, and large dimensions. |
animated
|
animated
|
boolean
|
false
|
Enable animated image support (typically for GIF files from Widen). |
noWiden
|
no-widen
|
boolean
|
false
|
Disable Widen API processing and use the image source directly. |
width
|
width
|
string
|
584
|
Default image width in pixels. Can be a number string or 'auto'. |
height
|
height
|
string
|
auto
|
Default image height in pixels. Can be a number string or 'auto'. |
smWidth
|
sm-width
|
string
|
274
|
Image width at small breakpoint (≤767px). Can be a number string or 'auto'. |
smHeight
|
sm-height
|
string
|
auto
|
Image height at small breakpoint (≤767px). Can be a number string or 'auto'. |
mdWidth
|
md-width
|
string
|
628
|
Image width at medium breakpoint (≥768px). Can be a number string or 'auto'. |
mdHeight
|
md-height
|
string
|
auto
|
Image height at medium breakpoint (≥768px). Can be a number string or 'auto'. |
lgWidth
|
lg-width
|
string
|
584
|
Image width at large breakpoint (≥1024px). Can be a number string or 'auto'. |
lgHeight
|
lg-height
|
string
|
auto
|
Image height at large breakpoint (≥1024px). Can be a number string or 'auto'. |
bpSmall
|
bp-sm
|
string
|
767px
|
Breakpoint for small screens, applied as max-width (≤767px). |
bpMedium
|
bp-md
|
string
|
768px
|
Breakpoint for medium screens, applied as min-width (≥768px). |
bpLarge
|
bp-lg
|
string
|
1024px
|
Breakpoint for large screens, applied as min-width (≥1024px). |
crop
|
crop
|
boolean
|
false
|
Enable image cropping using Widen API with the specified position. |
position
|
position
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
center
|
Crop position when cropping is enabled. Determines which part of the image to focus on. |
quality
|
quality
|
string
|
90
|
The quality parameter to render the image from Widen. |
CSS Parts
CSS parts that can be styled using the ::part() selector.
| Name | Description |
|---|---|
picture
|
The component's <picture> element when responsive mode is enabled.
|
image
|
The component's rendered <img> element.
|
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-imageHost-blockSize
|
auto |
--nbhd-imageHost-display
|
block |
--nbhd-image-blockSize
|
var(--nbhd-visual-blockSize, auto) |
--nbhd-image-display
|
var(--nbhd-visual-display, block) |
--nbhd-image-inlineSize
|
var(--nbhd-visual-inlineSize, 100%) |
--nbhd-image-insetBlockEnd
|
var(--nbhd-visual-insetBlockEnd, auto) |
--nbhd-image-insetBlockStart
|
var(--nbhd-visual-insetBlockStart, auto) |
--nbhd-image-insetInlineEnd
|
var(--nbhd-visual-insetInlineEnd, auto) |
--nbhd-image-insetInlineStart
|
var(--nbhd-visual-insetInlineStart, auto) |
--nbhd-image-marginBlock
|
var(--nbhd-visual-marginBlock, 0) |
--nbhd-image-marginInline
|
var(--nbhd-visual-marginInline, 0) |
--nbhd-image-maxBlockSize
|
var(--nbhd-visual-maxBlockSize, none) |
--nbhd-image-maxInlineSize
|
var(--nbhd-visual-maxInlineSize, 100%) |
--nbhd-image-minBlockSize
|
var(--nbhd-visual-minBlockSize, auto) |
--nbhd-image-minInlineSize
|
var(--nbhd-visual-minInlineSize, auto) |
--nbhd-image-objectFit
|
var(--nbhd-visual-objectFit, fill) |
--nbhd-image-position
|
var(--nbhd-visual-position, static) |
--nbhd-image-transform
|
var(--nbhd-visual-transform, none) |
--nbhd-image-transitionDelay
|
var(--nbhd-visual-transitionDelay, 0s) |
--nbhd-image-transitionDuration
|
var(--nbhd-visual-transitionDuration, 0s) |
--nbhd-image-transitionProperty
|
var(--nbhd-visual-transitionProperty, all) |
--nbhd-image-transitionTimingFunction
|
var(--nbhd-visual-transitionTimingFunction, ease) |