Демо · template

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

Рыба-текст и блоки для быстрой сборки лонгрида

Медиа для демо лежат в public/assets/ (сборка страниц их не копирует). См. public/assets/README.md.

Контекст

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

Задача

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

Решение

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

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

Источник с превью Короткая подпись: что пользователь увидит по ссылке www.examples.com Источник с favicon Вариант для более легких ссылок без скриншота www.examples.com/docs

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

Демо GIF в натуральном размере — Изображение в уменьшенном натуральном размере, по центру.

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

Демо изображения по ширине контента — Изображение по ширине контента. Клик открывает viewer.

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

Демо изображения шире контента — Изображение немного выходит за пределы контентной колонки.

Длинный скрин: свёрнутая высота и кнопка внутри превью

Блок data-case-tall-media: ширина задаётся атрибутом data-case-tall-width="wide" (как «широкая» картинка) или content (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на .case-media-tall__clip через --case-tall-max (по умолчанию min(70vh, 32rem)).

Демо: длинный вертикальный скрин интерфейса — Длинное изображение `img-long.webp` (исходник PNG рядом в `public/assets/template-elements-demo/`).

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

Колонок на широком экране задаётся на figure: атрибут style="--case-gallery-cols: 3". Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса.

Демо миниатюра 1 — Сетка в колонке статьи; на этом примере три колонки на десктопе.

Демо миниатюра 2 — Сетка в колонке статьи; на этом примере три колонки на десктопе.

Галерея: сетка на ширину страницы с боковыми отступами

Класс case-media-gallery--wide — та же логика выхода за колонку, что у одиночного case-media--wide. Здесь четыре колонки на широком экране (--case-gallery-cols: 4).

Wide-сетка, кадр 1 — Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).

Wide-сетка, кадр 2 — Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).

Слайдер: одна картинка, стрелки и точки

Блок .case-media-slider показывает слайды по одному: навигация стрелками «пред/след», пагинация точками (активная — акцентным цветом). Поддерживается клавиатура (←/→, Home/End на точках), тач/мышь-свайп и ленивая подгрузка соседних кадров через data-src. Клик по активному кадру открывает общий viewer кейса.

Тот же слайдер, но с модификатором case-media--wide — выходит за колонку контента, как одиночные широкие картинки. Кнопки пред/след и точки ведут себя так же.

Слайдер с горизонтальными (широкими) кадрами одного размера — все картинки 1024×800.

Тот же слайдер, но с вертикальными кадрами одного размера — все картинки 600×800.

Отдельный пример: переключатель режима анимации смены кадров — slide (сдвиг), fade (кроссфейд) и none (без перехода). Режим задаётся атрибутом data-slider-anim на фигуре.