5.2 KiB
Пример кейса: демо элементов
- Источник (разметка):
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
Короткая подпись: что пользователь увидит по ссылке. Превью:assets/template-elements-demo/wallpaper-1.jpg - С favicon — 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).