Image
draft
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
Required
|
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
|
|
responsive
|
responsive
|
boolean
|
false
|
|
breakpoints
|
breakpoints
|
boolean
|
false
|
|
noWiden
|
no-widen
|
boolean
|
false
|
|
width
|
width
|
number
|
584
|
|
height
|
height
|
number
|
auto
|
|
smWidth
|
sm-width
|
number
|
274
|
Image width at small breakpoint. |
smHeight
|
sm-height
|
number
|
auto
|
Image height at small breakpoint. |
mdWidth
|
md-width
|
number
|
628
|
Image width at medium breakpoint. |
mdHeight
|
md-height
|
number
|
auto
|
Image height at medium breakpoint. |
lgWidth
|
lg-width
|
number
|
584
|
Image width at large breakpoint. |
lgHeight
|
lg-height
|
number
|
auto
|
Image height at large breakpoint. |
bpSmall
|
bp-sm
|
number
|
767px
|
Breakpoint set for small screen and set to a max-width. |
bpMedium
|
bp-md
|
number
|
768px
|
Breakpoint set for medium screen and set to a min-width. |
bpLarge
|
bp-lg
|
number
|
1024px
|
Breakpoint set for large screen and set to a min-width. |
crop
|
crop
|
boolean
|
false
|
|
position
|
position
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
center
|
|
quality
|
quality
|
number
|
90
|
The quality parameter to render the image from Widen. |
CSS Parts
| Name | Description |
|---|---|
| picture | The component's picture element. |
| image | The components image element. |
CSS Properties
| Property | Default Value |
|---|---|
--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-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) |