# Media

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F9BrPQdUszNKlGHne6ILz%2FMedia%20Hero.png?alt=media&#x26;token=e4054890-ee06-42e3-9482-fb702807b83d" alt=""><figcaption></figcaption></figure>

## 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 <a href="#id-47c1ed" id="id-47c1ed"></a>

### How to use <a href="#id-0645af" id="id-0645af"></a>

`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 <a href="#id-86ad86" id="id-86ad86"></a>

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

### When to not use <a href="#id-62e02e" id="id-62e02e"></a>

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

## Accessibility <a href="#id-19ec8f" id="id-19ec8f"></a>

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 <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* 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
  {% endhint %}

{% hint style="danger" %}

* Use `Media` only for decorative purposes
* Repeat information in your alt text that is already on the page.
  {% endhint %}