Media

Media component is used to display images.

Overview

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.

Guidelines

How to use

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.

When to use

Media should flow with the text content and not appear too prominent or isolated.

When to not use

If Media does not bring any added value to the content, then it would be considered decorative and useless.

Accessibility

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.

Key takeaways

• 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.