PITHUB UI Components
Демонстрация компонентов FE-002.2 и FE-002.3
Spinner
sm
md
lg
Button
Variants
Sizes
With Icons
States
IconButton
Variants
Sizes
Input
This field is required
FormField
Мы не будем передавать его третьим лицам
Минимум 8 символов
Card
variant="default"
Простая карточка
Базовый пример использования Card компонента
Контент карточки может содержать любые элементы.
Карточка с действием
Header с кнопкой действия справа
Card.Action позиционируется в правом верхнем углу заголовка.
Гонка на Moscow Raceway
Time Attack Championship 2024
15 марта 2024
Московская область
10:00 - 18:00
variant="gradient" — светлый, градиентная граница
Профиль гонщика
Карточка с градиентной границей
АП
Алексей Петров
47 гонок · Москва
Ближайшее событие
28 февраля 2026
Сочи Автодром
feature-card — тёмный, градиентная граница (используется в тёмных секциях)
Календарь событий
Все гонки и мероприятия в одном месте с удобной фильтрацией
Треки и автодромы
Подробные страницы каждого автодрома с историей событий
Badge
Variants
DefaultSecondaryOutlineSuccessWarningErrorInfo
Sizes
SmallMedium
Avatar
Sizes
АПsm
МИmd
ДСlg
ЕКxl
Fallback Types
ИГWith Image
ПСInitials (ПС)
Placeholder
Label
Logo
PH
smPH
mdPH
lgSelect
Switch
С лейблом
Sizes & States
sm
md
disabled off
disabled on
Dialog
Stack
Вертикальный flex-контейнер с настраиваемыми отступами
Этап 1Этап 2Этап 3
АП
Алексей Петров
Гонщик
Flex
Универсальный flex-контейнер с полным набором настроек
PH
PITHUBTime AttackДрэг-рейсингКольцевые гонкиРаллиКартингДрифтЭндуранс
1Moscow Raceway
2Kazan Ring
3Сочи Автодром
Container
Ограничивает ширину контента и центрирует его. Текущая страница использует аналогичный контейнер max-w-4xl.
max-w-screen-sm · центрированный контент
max-w-screen-md · центрированный контент
max-w-screen-lg · центрированный контент
max-w-screen-xl · центрированный контент
Компоненты созданы в рамках задач FE-002.2 и FE-002.3