Image - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki
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.
Used by (8)
- Data model
- Logo grid
- Universal banner
- Background media
- Card
- Image with caption
- Lightbox media viewer
- Video
Back links (18)
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
- component wraps the responsive Image component we’ve built and
- See Image for more
- Image here mirrors the
- here mirrors the Image 1 component
- 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....
Universal banner (3)
- optional Image component at various
1.0.1|@sm@md| Image is hidden- See Image for more
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
| 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 |