# Media

`<Media>` frames an image or a video with a shadow and an optional caption, and fades it in when the
slide appears. It is available in `.mdx` stories.

## Live demo

<StoryEmbed slug="media" />

## Syntax

```mdx title="MDX"
import photo from "./photo.svg"

--- layout=center

<Media
  src={photo}
  alt="Purple gradient"
  caption="Lorem ipsum dolor sit amet"
/>
```

```mdx title="MDX (video)"
<Media type="video" src="/lorem.mp4" caption="Lorem ipsum" />
```

## Attributes and props

| Prop        | Type             | Default          | Description                   |
| ----------- | ---------------- | ---------------- | ----------------------------- |
| `src`       | `string`         | —                | Image or video URL            |
| `alt`       | `string`         | `"Illustration"` | Alternative text of the image |
| `caption`   | `string`         | —                | Text shown under the media    |
| `type`      | `image \| video` | `image`          | A video gets native controls  |
| `className` | `string`         | —                | Extra CSS classes             |

## In other formats

<FormatSupport />