Image

Core UI component

The Image component is a wrapper that at its base adds an image to the page. It allows adopters to pass in multiple images it can render depending on the various breakpoints standardizing the image data model.

---

Dependencies (1)

• <picture> ^r2

Used by (7)

• Data model
• Logo grid
• Background media
• Card
• Image with caption
• Lightbox media viewer
• Video

Back links (15)

Card in card (1)

• functionality to it. The Image expands to full width while

Card (1)

• link with or without an Image and just an icon for its call

Data model (1)

• image | Image

Image with caption (4)

• component wraps the responsive Image component we’ve built and
• See Image for more
• Image here mirrors the
• here mirrors the Image 1 component

Lightbox media viewer (3)

• an Image or Video depending on what the adopters...
• 2.1.1 | Image | If an
• | If an Image is provided, render it as the main media piece....

Video (5)

• 2.1 | undefined (default) | Poster Image 2 prefilled by...
• 2.1 | Image | Adding a custom Poster
• | Adding a custom Poster Image 2 overrides the...
• ...| Inline (default) replaces Poster Image 2.
  ...
• See Image for more

Resources

• r1: Box folder
• r2: <picture>
• r3: Carbon 2x grid

---

1. Data model

	name	type	description
required	defaultSrc	String	Default image URL (usually image for largest breakpoint)
	sources[]	Array	Array of image Objects
	sources[].src	Array	Image URL for given breakpoint
	sources[].breakpoint	Number	min-width breakpoint to render the image.
required	alt	String	Alternative text
	longDescription	String	Additional long form text visible to screen readers, hidden from users.
	border	Boolean	Optional border

Back to top