Компоненты
интерфейса
Технический справочник по строительным блокам Zenvy. Копируйте код, внедряйте, адаптируйте.
01. Кнопки (Buttons)
Базовый класс .zenvy-btn наследует шрифт Space Grotesk. Все кнопки имеют жесткую тень и жесткую границу. Используйте модификаторы для смены цвета.
Primary
Используется для основных действий (CTA). Фон Neon Lime.
.zenvy-btn--primary
Outline
Для второстепенных действий. Прозрачный фон, черная обводка.
.zenvy-btn--outline
Props & Vars
Настройка через CSS переменные.
- padding: 1rem 2rem
- radius: 0px (Hard edge)
- shadow: 6px 6px 0px #1C1917
- hover: translate(-2px, -2px)
02. Формы (Forms)
Поля ввода имеют минималистичный дизайн с акцентом на типографику. Валидация осуществляется через изменение цвета бордера.
Стандартный ввод
Классы input и select наследуют базовые стили. Добавьте border: 2px solid #1C1917 для соответствия сетке.
Валидация (Validation)
Используйте красную обводку (#EF4444) для ошибок и зеленую (#D3F261) для успеха.
03. Обратная связь (Feedback)
Система уведомлений, алертов и модальных окон. Строгая иерархия информации.
Alerts
Используйте классы .zenvy-card с модификаторами границ для создания алертов.
Modals
Структура модального окна. Используйте .zenvy-wrap для центрирования контента внутри.
Подтверждение
Вы действительно хотите удалить этот компонент из библиотеки?