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 (2)

• <picture> ^[r2]
• Carbon 2x grid

Used by (7)

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

Back links (10)

Card in card (1)

• ...and provides CTA functionality to it. The Image expands to full width while the Card’s...

Card (1)

• ...tile, or Card link with or without an Image and just an icon for its call to

Data model (1)

• image | Image

Image with caption (1)

• component wraps the responsive Image component we’ve built and provides it with a...

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 (3)

• 2.1 | undefined (default) | Poster Image ^{2](#2-poster-image)]} prefilled by...
• ...| Inline (default) replaces Poster Image ^{2](#2-poster-image)]}.
  ...
• ...See Image for more

Resources

• r1: Box folder
• r2: <picture>

---

See box folder ^[r1] for more details