# Media

<figure><img src="/files/lWcz5qRXwcohca1vomzr" alt=""><figcaption><p>Illustration of Media Component</p></figcaption></figure>

## Overview

Use the Media component to add graphics into the interface like image, illustrations, videos, flags, icons or avatars to the interface.

### Size and formats

The component can adapt from very small (siez 5) to extra extra large (size 11) sizes, allowing flexibility in design and layout. In total 7 sizes are available.

The component adjusts its design to adapt for differents formats :&#x20;

* **Square Images:** Fill the entire space.
* **Landscape Images:** Fit to height.
* **Portrait Images:** Fit to width.
* **Custom Sizing:** Media dimensions can be customized with specific max and min widths and heights, ensuring optimal display across devices.

<figure><img src="/files/AKLFNk9K97hBe5ix1iXg" alt=""><figcaption><p>How various media format are displayed</p></figcaption></figure>

### Technical specifications

Media comes with an empty state, to be used when no media has been provided. It is also used for loading state.&#x20;

Hovering over the media reveals a preview icon. Media is clickable, triggering a Lightbox for preview.

<figure><img src="/files/iWi4d5Niv9kCeWg5MaVw" alt=""><figcaption><p>Hovering a media</p></figcaption></figure>

### Lightbox <a href="#id-47c1ed" id="id-47c1ed"></a>

Media appears as a thumbnail image, providing a clean and uniform look across the platform. When a user clicks on the thumbnail, the media opens in a dedicated overlay (called a Lightbox). This Lightbox focuses the viewer’s attention by dimming the rest of the website and presenting the media in a larger, central frame. This feature is especially useful for videos but also allows users to view images in a larger format.

<figure><img src="/files/eBvgemvp4mQo40c4hUzK" alt=""><figcaption><p>Lightbox</p></figcaption></figure>

## Avatar  <a href="#id-47c1ed" id="id-47c1ed"></a>

The Avatar component adapts to show users or entities. It can display initials, icons, or images, with the name shown when you hover. Clicking triggers actions.&#x20;

To display multiple avatars, uses component `Avatars` it automatically handles different colors and spacing.&#x20;

Disabled avatars show that the user or entity is no longer active.

<figure><img src="/files/zzT03gtidhCWKrfTEMsx" alt=""><figcaption></figcaption></figure>

## Guidelines <a href="#id-47c1ed" id="id-47c1ed"></a>

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

* **Enhance content by adding visual representation :** Use Media to add value to the content, aiding in user navigation and comprehension without overwhelming the text content.
* **Media to the second plan :** Media should never dominate the page or replace textual information, it always has to be used as a complementary source of knowlegde.

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

* **Decorative purpose only:** Do not use Media component if it does not add informational value or if it overly clutters the interface.

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

* **Screen Reader Support:** All media must have `alt` text for screen readers, enhancing accessibility for visually impaired users. For videos, use video tracks with captions.\
  Avoid repeating information already present on the page visually.
* **Captions and Tracks:** Adding captions to images and providing track support for videos (with captions, subtitles) is crucial for accessibility and compliance with web standards.

## Key takeaways <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* Context is crucial:  media should add value to the related content.
* 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` with no context to it
* Repeat information in your alt text that is already on the page.
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design.mirakl.com/design/components/images/media.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.