UI-кит

Типографика

Заголовок H1

Заголовок H2

Заголовок H3

Лид-абзац: крупнее и спокойнее обычного текста.

Обычный текст. Ссылка в тексте. Блок .prose сам расставляет отступы в статьях из CMS.

  • Пункт списка
  • Ещё пункт

Кнопки

Форма: все поля, маски и схема

Правила — схема «uikit» в src/forms/schemas.js. Ошибки появляются после ухода с поля, а после попытки отправки — на каждый ввод. Попробуйте e-mail taken@mail.ru — увидите ошибку «с сервера» под полем.

Минимум 8 символов и цифра
Количество страниц
Оценка шаблона
Группа radio: стрелки, схема формы; повторный клик снимает оценку
Как связаться
Услуги
Файлы (необязательно)

    Рейтинг

    Выпадающие панели и выезжающая панель

    Фильтры

    Та же модалка (фокус, Esc, #id в адресе), но прижата к краю: класс dialog--drawer.

    Шторка снизу

    Класс dialog--bottom: удобно на телефоне — до кнопок дотягивается большой палец.

    Обратный отсчёт

    15 минут
    00 секунд

    «Личный» таймер: 15 минут от первого визита, перезагрузка его не сбрасывает.

    Скопировать и поделиться

    PROMO2026

    До / после

    После: цветное фото До: чёрно-белое фото До После

    Показать ещё

    • Новость 1
    • Новость 2
    • Новость 3
    Показать ещё

    Видео по клику и карта

    Офис
    Москва, Красная площадь, 1

    Москва, Красная площадь, 1

    Открыть в Яндекс.Картах

    Плеер YouTube грузится только по клику (до него — одна картинка-превью). Карта грузится, только когда до неё докрутили; для продакшена нужен ключ API — data-map-apikey.

    Загрузка: скелетон и кнопка

    Табы

    Открытая вкладка хранится в адресе (?uikit-tabs=…) — перезагрузите страницу.

    Первая вкладка. Стрелки ← → переключают вкладки.

    Вторая вкладка выше первой — блок плавно меняет высоту, страница не прыгает.

    • Материал — дуб
    • Размер — 120 × 60 см
    • Вес — 18 кг
    • Гарантия — 2 года

    «Собрал за вечер, стоит ровно». — Ирина

    «Цвет как на фото». — Олег

    Аккордеон (несколько открытых)

    Текст

    Текст

    Модалка и уведомления

    Модалка (ссылкой #callback)

    Подсказки

    Разметка в подсказке ⓘ

    Tab по кнопкам — подсказка появится и с клавиатуры, Esc — спрячет.

    Скроллбары

    CSS (весь сайт, без JS): .scroll-area

    Строка 1 — колесо крутит блок, а не страницу.

    Строка 2 — колесо крутит блок, а не страницу.

    Строка 3 — колесо крутит блок, а не страницу.

    Строка 4 — колесо крутит блок, а не страницу.

    Строка 5 — колесо крутит блок, а не страницу.

    Строка 6 — колесо крутит блок, а не страницу.

    Строка 7 — колесо крутит блок, а не страницу.

    Строка 8 — колесо крутит блок, а не страницу.

    Строка 9 — колесо крутит блок, а не страницу.

    Строка 10 — колесо крутит блок, а не страницу.

    Строка 11 — колесо крутит блок, а не страницу.

    Строка 12 — колесо крутит блок, а не страницу.

    Модуль scrollbar — поверх содержимого, прячется

    Строка 1 — скроллбар не отнимает ширину.

    Строка 2 — скроллбар не отнимает ширину.

    Строка 3 — скроллбар не отнимает ширину.

    Строка 4 — скроллбар не отнимает ширину.

    Строка 5 — скроллбар не отнимает ширину.

    Строка 6 — скроллбар не отнимает ширину.

    Строка 7 — скроллбар не отнимает ширину.

    Строка 8 — скроллбар не отнимает ширину.

    Строка 9 — скроллбар не отнимает ширину.

    Строка 10 — скроллбар не отнимает ширину.

    Строка 11 — скроллбар не отнимает ширину.

    Строка 12 — скроллбар не отнимает ширину.

    Слайдер с автопрокруткой

    1
    2
    3
    4
    5
    6

    Параллакс

    Обсудим проект?

    Оставьте телефон — перезвоним в течение часа.