Image

Use the Image component to display an image in your product. This renders the <img> HTML element and extends the Box component.
Import component
import { Image } from 'rimble-ui';

Example

random unsplash image

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
altstringoptionalnoneSets alt attribute on image for accessibility
srcstringrequirednoneSets the src attribute of the img element
asoptional
'img'
maxWidthoptional
'100%'
heightoptional
'auto'
Styled System Props
Image uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Accessibility

  • Always include an alt prop so that screen readers can describe the image to those with visual impairments
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute

Image