Текст с изображением

Блок объединяет короткое объяснение и одно изображение. На узком экране обе части складываются вертикально, сохраняя порядок чтения.

Общий пример

Общий примерMarkdown

Текст слева

Изображение дополняет объяснение и на узком экране переносится ниже.

Markdown

content_copyCopy

:::media {side=right ratio=16/9}
## Текст слева

Изображение дополняет объяснение и на узком экране переносится ниже.

![Схема Docara](../../assets/docara-flow.png)
:::

Положение

side=right показывает изображение справа на широком экране, а side=left — слева. На телефоне компонент использует одну колонку.

Изображение слеваMarkdown

Изображение слева

Зеркальный вариант использует тот же порядок исходного Markdown.

Markdown

content_copyCopy

:::media {side=left ratio=16/9}
## Изображение слева

Зеркальный вариант использует тот же порядок исходного Markdown.

![Схема Docara](../../assets/docara-flow.png)
:::

Пропорции

ratio принимает 1/1, 4/3, 3/2 или 16/9. Выбирайте значение по смыслу изображения, чтобы макет не прыгал во время загрузки.

Вызов

:::media {side=right ratio=4/3}
## Понятный заголовок

Короткое объяснение связи текста и изображения.

![Интерфейс Docara](../../assets/docara-screen.png)
:::

Блоку нужно ровно одно изображение с осмысленным alt-текстом. Не используйте его для галереи или длинной статьи.