# Пример кейса: демо элементов

- **Источник (разметка):** `src/pages/cases/template-elements-demo.html` → после сборки `public/cases/template-elements-demo.html`
- **eyebrow:** Демо · template
- **meta description:** Демо-страница кейса со всеми разработанными элементами: карточки ссылок и медиа-блоки.
- **Подзаголовок (h1 sub):** Рыба-текст и блоки для быстрой сборки лонгрида

*Источник шаблона (устаревшая ссылка в HTML): можно вести на этот файл — `texts/cases/template-elements-demo.md`.*

## Контекст

Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта. Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.

## Задача

Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента. Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.

## Решение

Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.

### Карточки ссылок

- **С превью** — [www.examples.com](https://www.examples.com/)  
Короткая подпись: что пользователь увидит по ссылке. Превью: `assets/template-elements-demo/wallpaper-1.jpg`
- **С favicon** — [www.examples.com/docs](https://www.examples.com/docs)  
Вариант для более лёгких ссылок без скриншота.

### Картинка: 50% от оригинала (без превью)

`assets/template-elements-demo/hello.gif` — демо GIF в натуральном размере, по центру.

*Подпись к figure:* Изображение в уменьшенном натуральном размере, по центру.

### Картинка: по ширине контента (с превью)

`assets/template-elements-demo/wallpaper-1.jpg` — клик открывает viewer (в UI).

*Подпись:* Изображение по ширине контента. Клик открывает viewer.

### Картинка: чуть шире контента (с превью)

Тот же ассет — изображение немного выходит за пределы контентной колонки.

### Длинный скрин: свёрнутая высота + развернуть

Разметка с `data-case-tall-media` и `data-case-tall-width` (`content` / `wide`): туман только в свёрнутом виде; кнопки под картинкой; после раскрытия туман скрывается. Исходник длинного кадра: `public/assets/template-elements-demo/img-long.png` → WebP командой `npm run optimize-images -- public/assets/template-elements-demo`. См. `public/assets/README.md`.

### Галерея: сетка по ширине контента

Семь файлов `assets/template-elements-demo/small-image-1.webp` … `small-image-7.webp` (рядом в той же папке лежат исходные PNG; WebP — `npm run optimize-images -- public/assets/template-elements-demo`). На `figure` задано `--case-gallery-cols: 3` для десктопа; ниже порогов ширины окна число колонок уменьшается (см. `docs/case-page-blocks.md`). Клик по ячейке открывает viewer.

### Галерея: сетка на ширину страницы (wide)

Те же `small-image-*.webp`, класс `case-media-gallery--wide`, `--case-gallery-cols: 2`.

### Callout: важный абзац с эмоджи

> Это пример акцентного callout-блока. Эмоджи вынесен влево и пульсирует, чтобы визуально усилить важную мысль. (в HTML: эмоджи 📌)

### Видео: карточка с тенью

`assets/template-elements-demo/video-1.webm` — пример видео-карточки в стиле кейса.

*Подпись:* Пример видео-карточки в стиле кейса.

## Результат

Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.

---

*Новые картинки для демо и кейсов клади в `public/assets/…` (см. `public/assets/README.md`).*