Media
Media component is used to display images.
Last updated
Media component is used to display images.
Last updated
Media component is used to provide a graphic representation of something (e.g. photo or illustration).
This component only exists in square format:
Landscape format pictures will only fit height px
Portrait format picture will only fit weight px
Square picture will fill the whole space
Media has 5 sizes available, from XS to XL.
Media component comes with an empty state when to file, or URL has been provided.
Media component is a great way to bring added value to written content. Research has found users with some access needs (such as dyslexia) navigate web pages through images. Images help them orient themselves, and they separate the content.
Thus, the Media component should be used as a complementary source of information. It should not be used alone (without text) for accessibility reasons and should also not be used for decorative purposes only.
Media should flow with the text content and not appear too prominent or isolated.
If Media does not bring any added value to the content, then it would be considered decorative and useless.
Do not use any media that contains words in them: screen readers will not be able to read the words, and some users might miss the information.
Media must always have text alternatives to describe it. This makes sure that people with disabilities can understand them. Specify a text alternative with the alt attribute.
💡 Alt-text is not usually visible but is read out by screen readers or displayed if an image does not load or if images have been switched off.
Adding a caption to Media is a good practice as users may not always understand what is represented without having screen reader technologies.
Consider context: Media must bring value to the content it is related to
Use the right component size considering the whole page design
Provide descriptive Alt-text for screen readers and captions for all other users
Use Media only for decorative purposes
Repeat information in your alt text that is already on the page.
