Image Preview

Images, like photos and illustrations, help reinforce a message and express your product or app's style.




To give an image additional prominence, you can use the shadow prop to make it appear elevated. Too many shadows can cause a busy layout, so use them sparingly.

Image layout


Use the alt prop to provide a text attribution for images. Alt text should be brief but accurate—one or two sentences that describe the image and its context. If the image represents a function, be sure to indicate that. If it’s meant to be consumed with other objects on the page, consider that as well.

Don’t repeat information that’s on the page in alt text since screen readers will read it twice.

If images are solely decorative and don’t provide useful information or context, use role="presentation" to hide them from assistive technologies.