Карточка статьи
Обложка, теги, заголовок и эксцерпт. Hover: подъём + рамка.
// UI KIT · v2
Библиотека интерфейсных элементов
Все элементы блога в фирменном стиле «Мандарин»: цвет, типографика, кнопки, иконки, формы, карточки, индикаторы, оверлеи, тосты, табы, аккордеоны, подсказки, живой рендер Markdown и реальные компоненты сайта.
01 · Цвет
Палитра
02 · Типографика
Шкала · Onest + JetBrains Mono
Заголовок H1
Onest 800 · 48/-2pxЗаголовок H2
Onest 800 · 30pxЗаголовок H3
Onest 800 · 22pxОсновной текст - Onest 400/500. Дружелюбно, от первого лица, без канцелярита.
Onest 400 · 18pxВторичный / подпись
Onest 400 · 14px// КИКЕР · @chernovdev
JetBrains Mono03 · Кнопки
Кнопки, иконки, состояния
Наведи мышь или пройдись табом - hover и focus живые.
Основная (soft)
Заливка / ghost
Контур
Иконочные
Группа
Загрузка
Размеры
04 · Иконки
Набор интерфейсных иконок
42 иконки Lucide (ISC), единый контур 24px / stroke 2. Подключение спрайтом, вставка: <svg class="ic"><use href="#i-search"/></svg>. Цвет наследуется от текста.
Логотип-знак «Ч»
Буква «Ч» оптически центрирована в квадрате. Единый источник - /favicon.svg; растровые версии (PNG, ICO, apple-touch, OG) генерит scripts/make-favicons.mjs.
05 · Формы
Поля ввода и контролы
06 · Теги и бейджи
Теги, фильтры, статусы
07 · Карточки
Карточки
Простая карточка
Контейнер для контента: радиус 18px, рамка 1px.
192статей опубликовано
08 · Индикаторы
Спиннер, прогресс, скелетоны, аватары
Спиннер идёт загрузка…
Прогресс
62%Скелетон
Аватары Ч СЧ АЛ
ЧАК+5
Бейдж-счётчик 7
09 · Элементы статьи
Алерты, код, цитата, таблица (prose)
! Инфо-коллаут для важной мысли в статье - акцентная плашка.
Инлайн-код выглядит так: npm run build - на мягкой плашке. А ссылка вот такая.
# блок кода
def hello(name):
return f"Привет, {name}"Цитата выделяется акцентной линией слева и приглушённым курсивом.
- Маркер списка - в акценте
- Второй пункт
| Метрика | Значение |
|---|---|
| Авто-PR | 62% |
| Приняты | 88% |
10 · Markdown
Живой рендер Markdown
Тот же движок (markdown-it), что рендерит статьи блога. Слева - исходник, справа - результат в стиле prose.
// исходник
// результат
11 · Подсказки
Tooltip
CSS-подсказка по hover и по фокусу с клавиатуры (focus-within).
пред-релиз
12 · Раскрытие
Табы, аккордеон, dropdown
Табы
Первая вкладка: краткий обзор. Клик и стрелки клавиатуры переключают вкладки.
Вторая вкладка: шаги установки. Контент панелей переключается без перезагрузки.
Третья вкладка: частые вопросы и ответы.
Аккордеон
Что входит в UI Kit?
Цвет, типографика, кнопки, иконки, формы, карточки, индикаторы, оверлеи, тосты, табы, подсказки и реальные компоненты сайта.
На нативных элементах?
Да. Аккордеон - на
<details>, модалка - на <dialog>, popover - на нативном Popover API. Минимум JS, максимум доступности.Тёмная тема?
Нет. У бренда один светлый стиль «Мандарин» - это осознанное решение.
Dropdown-меню
Действия
13 · Оверлеи
Модалка, drawer, popover
Нативный Popover
Это нативный Popover API: закрывается по клику вне и по Esc, без своего JS.14 · Тосты
Уведомления (toasts)
Всплывают в правом нижнем углу, сами исчезают через 4 секунды или по крестику.
15 · Пустые состояния
Empty state
Ничего не нашлось
По запросу нет статей. Попробуй изменить формулировку или сбросить фильтры.
16 · Навигация
Крошки и пагинация
17 · Реальные компоненты
Блоки страниц сайта
Qlik Sense Server November 2025 Patch 11
Заголовок статьи в поиске
…фрагмент текста с найденным запросом и контекстом вокруг…