# Image

`::image` places an image in a column, a card or a grid cell. For a full-height image, use the
`image-left`, `image-right` or `image` layouts.

## Live demo

<StoryEmbed slug="image" />

## Syntax

```md title="Markdown"
::image{src=./photo.svg alt="Purple gradient" fit=cover}
```

```md title="Markdown (image layout)"
--- layout=image-right image=./photo.svg alt="Abstract purple illustration"

# Full-height image
```

```mdx title="MDX"
<Image
  src="./photo.svg"
  alt="Purple gradient"
  fit="contain"
  caption="Lorem ipsum"
/>
```

## Attributes and props

| Attribute | Type               | Default | Description                 |
| --------- | ------------------ | ------- | --------------------------- |
| `src`     | `string`           | —       | Image path or URL           |
| `alt`     | `string`           | —       | Required for accessibility  |
| `fit`     | `cover \| contain` | `cover` | How the image fills its box |
| `caption` | `ReactNode` (MDX)  | —       | Text shown under the image  |

Local images are copied into the build, or embedded in the single-file HTML export.

## In other formats

<FormatSupport />