Design System
Components and styles of the Anirum project
Тени и высота элементов
7 теневых токенов — визуальная иерархия
Все тени
floating
модальное окно, дропдаун
floating-bottom
дропдаун ↓
floating-top
дропдаун ↑
raised-top
липкий хедер
raised-bottom
липкий футер
card
ценообразование, оформление
card-hover
интерактивный
none
контент на первый план
Интерактивные примеры
Паттерн 1: тень + наведение
Clickable Card
Нажмите на карточку — тень усиливается при наведении
Паттерн 2: статичная тень
Pricing Card
Статичная важная карточка, без эффекта наведения
Паттерн 3: только граница
Form Group
Формы, группы полей
Паттерн 4: нет тени и границы
Course Card
Контент — это контейнер
Липкие элементы
Липкий хедер
shadow-raised-top
Контент скользит под хедером
Дропдаун и модальные окна
Dropdown / Modal
Uses shadow-floating
Appears above other content
Быстрая справка
floating
shadow-floatingcard
shadow-card hover:shadow-card-hoverЛипкий хедер
shadow-raised-top stickySticky Footer
shadow-raised-bottom sticky bottom-0