UI Components Showcase
Витрина всех UI компонентов приложения
00. Grid System
12-колоночная сетка из Figma. Адаптивная: 4 колонки на mobile, 8 на tablet, 12 на desktop.
Спецификация из Figma
desktop
Колонок: 12
Margin: 64px
Gutter: 16px
Min: 1600px
tablet-large
Колонок: 12
Margin: 64px
Gutter: 16px
Min: 1280px
tablet
Колонок: 8
Margin: 32px
Gutter: 16px
Min: 768px
mobile
Колонок: 4
Margin: 16px
Gutter: 8px
Min: 0px
Демо сетки
Колонки автоматически адаптируются. Resize окно для проверки.
Примеры лейаутов
6 + 6 колонок (50/50)
4 + 4 + 4 колонки (33/33/33)
3 + 9 колонок (25/75 — sidebar + content)
Full width (12 колонок)
Color Palette
Цветовая палитра приложения из Figma
NEUTRAL
White
#FFFFFF
White / 20
#FFFFFF33
White / 40
#FFFFFF66
Neutral / 100
#F5F6F7
Neutral / 200
#E8E9EB
Neutral / 300
#DDDDE2
Neutral / 400
#A4ABB1
Neutral / 500
#71757E
Neutral / 600
#25272B
ACCENT
Accent / 500
#1BAB66
Accent / Secondary 500
#484F5E
RED
Error / 500
#D91515
02. Typography
Типографическая система с TT Neoris Trial
TT Neoris Trial
Name
Font size
Line Height
Heading 1
56 px
61.6 px
Heading 2
48 px
52.8 px
Heading 3
40 px
44 px
Heading 4
32 px
35.2 px
Heading 5
24 px
26.4 px
Heading 6
20 px
22 px
Large Text Bold
Large Text Regular
20 px
28 px
Medium Text Bold
Medium Text Regular
18 px
25.2 px
Normal Text Bold
Normal Text Regular
16 px
22.4 px
Small Text Bold
Small Text Regular
14 px
19.6 px
Menu Medium
26 px
33.6 px
Contact Regular
22 px
28.8 px
02.1. Typography Components
Компоненты Typography - используйте их вместо inline стилей. Все компоненты используют те же стили что и на витрине выше.
Заголовки
H1 - Главный заголовок (72px / 80px / Medium)
Жилой комплекс Чайка
Жилой комплекс Чайка
H2 - Заголовок секции (48px / 56px / Medium)
О проекте
О проекте
H3 - Подзаголовок (40px / 48px / Medium)
Преимущества
Преимущества
H4 - Подзаголовок (32px / 35.2px / Medium)
Особенности
Особенности
H5 - Подзаголовок (24px / 26.4px / Medium)
Детали
Детали
H6 - Подзаголовок (20px / 22px / Medium)
Метка
Метка
Текст
TextLarge - Большой текст (20px / 28px)
Large Text Regular
Large Text Bold
Large Text Regular
Large Text Bold
Text (Medium) - Основной текст (18px / 26px / Regular)
Новый жилой район в 15 минутах от Санкт-Петербурга с малоэтажными жилыми домами и собственной инфраструктурой
Новый жилой район в 15 минутах от Санкт-Петербурга с малоэтажными жилыми домами и собственной инфраструктурой
TextMedium - Средний текст (18px / 25.2px)
Medium Text Regular
Medium Text Bold
Medium Text Regular
Medium Text Bold
TextSmall - Мелкий текст (16px / 24px / Regular)
На территории будет располагаться два детских сада, школа, торговый центр
На территории будет располагаться два детских сада, школа, торговый центр
TextNormal - Обычный текст (16px / 22.4px)
Normal Text Regular
Normal Text Bold
Normal Text Regular
Normal Text Bold
TextTiny - Очень маленький текст (14px / 19.6px)
Small Text Regular
Small Text Bold
Small Text Regular
Small Text Bold
Menu - Текст меню (26px / 33.6px / Medium)
Menu Medium
Menu Medium
Contact - Текст контактов (22px / 28.8px / Regular)
Contact Regular
Contact Regular
Пример использования в Hero секции
Жилой комплекс
Чайка
Новый жилой район в 15 минутах от Санкт-Петербурга
с малоэтажными жилыми домами и собственной инфраструктурой
03. Heading
Заголовок с кнопкой
Large (48/56) - Кнопка и текст влево
Large (48/56) - Кнопка и текст по центру
Medium (40/48) - Кнопка и текст влево
Medium (40/48) - Кнопка и текст по центру
Small (640×80) - Кнопка и текст влево
Small (640×80) - Кнопка и текст по центру
XSmall (360×180) - Кнопка и текст влево
XSmall (360×180) - Кнопка и текст по центру
04. Button Play
Круглая кнопка воспроизведения с настраиваемыми цветами
White / Black
80 x 80
Green / White
80 x 80
White / Green
80 x 80
White / Black
64 x 64
Green / White
64 x 64
White / Green
64 x 64
05. Button
Кнопки с настраиваемыми размерами и цветами
288×58
249×48
06. Tabs
Вкладки с настраиваемыми размерами
07. Tab Item
Элемент вкладки с различными состояниями
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
08. Volume Controls
Ползунок громкости с иконками
09. Video Controls
Панель управления видео
Large (768px)
Small (358px)
Tag
Компонент тега/метки. Два размера: Large (32px) и Small (28px).
Large (1600+)
Small (0-1599)
Пример использования
Icon Button
Круглая кнопка с иконкой. Два размера: Large (56px) и Medium (48px).
Large (1600+) — 56px
Primary / Filled
Secondary / Filled
Primary / Outlined
Medium (0-1599) — 48px
Primary / Filled
Primary / Outlined
Genplan Pin
Пин для генплана. Primary/Text — кружок с номером, раскрывается в плашку по клику. Primary/Icon — иконка листика, раскрывается в плашку. Если нет tag — не кликабельный.
На тёмном фоне (генплан)
Primary / Text — Large (40px) (клик для раскрытия в плашку)
Primary / Text — Large (40px) (без детальной инфо — не кликабельный)
Primary / Icon — Large (40px) (клик для раскрытия, иконка Leaf)
На светлом фоне
Primary / Text — Medium (36px) (клик для раскрытия)
Primary / Icon — Medium (36px) (клик для раскрытия)
Compass
Компонент компаса для генплана. Размер 80×80px, кратность 8px. Spring-анимация вращения.
Facts Swiper
Компонент для отображения фактов с навигацией. Поддерживает автоматическое определение breakpoint или ручное указание.
Динамический пример
Компонент автоматически меняет размер при изменении ширины окна браузера
2 650
человек будет проживать
в жилом комплексе
Все варианты breakpoints
Desktop (1600+) — 832×468px
2 650
человек будет проживать
в жилом комплексе
Tablet Large (1280-1599) — 648×364.5px
2 650
человек будет проживать
в жилом комплексе
Tablet (768-1279) — 688×387px
2 650
человек будет проживать
в жилом комплексе
Mobile (0-767) — 358×400px
2 650
человек будет проживать
в жилом комплексе
Автоматическое определение breakpoint
Компонент автоматически определяет breakpoint на основе ширины окна
2 650
человек будет проживать
в жилом комплексе
VideoItem
Компонент для отображения видео блока с превью. Поддерживает 7 состояний размеров из Figma: Mobile (0-767px), Small Vertical (768-1023px), Medium Vertical (1024-1279px), Small Horizontal (1280-1599px), Medium Horizontal (1920px+), Large (1280-1599px вертикально), Fullscreen (1920px+ на весь контейнер).
1. Mobile — 390px × 220px
Маленькие карточки для мобильных устройств (0-767px) — из Figma
Видео о комплексе
2. Small Horizontal — 648px × 396px
Маленькие горизонтальные карточки (1280-1599px) — из Figma
Видео о комплексе
3. Small Vertical — 704px × 396px
Маленькие вертикальные карточки (768-1023px) — из Figma
Видео о комплексе
4. Medium Horizontal — 888px × 500px
Средние горизонтальные карточки (1920px+) — из Figma
Видео о комплексе
5. Medium Vertical — 960px × 540px
Средние вертикальные карточки (1024-1279px) — из Figma
Видео о комплексе
6. Large — 960px × 540px (пропорциональное масштабирование)
Большие карточки вертикально (1280-1599px) — из Figma, пропорционально уменьшаются
Видео о комплексе
7. Fullscreen — 100% × пропорциональная высота (1792×1008)
На весь контейнер без ограничений по ширине (1920px+), пропорционально масштабируется
Видео о комплексе
Dynamic Item размеры
Размеры из Dynamic Item компонента (Photo/Live карточки)
Dynamic Mobile Vertical — 171px × 228px
Dynamic вертикальная ориентация для мобильных (0-767px)
Live-камеры
Dynamic Mobile Horizontal — 358px × 202px
Dynamic горизонтальная ориентация для мобильных (0-767px)
Live-камеры
Dynamic Small Vertical — Vertical — 336px × 448px
Dynamic вертикальная ориентация для Small Vertical (768-1023px)
Live-камеры
Dynamic Small Vertical — Horizontal — 688px × 387px
Dynamic горизонтальная ориентация для Small Vertical (768-1023px)
Live-камеры
Dynamic Medium Vertical — 304px × 405px
Dynamic размер для Medium Vertical (1024-1279px)
Live-камеры
Dynamic Small Horizontal — Vertical — 316px × 421px
Dynamic вертикальная ориентация для Small Horizontal breakpoint (1280-1599px)
Live-камеры
Dynamic Medium Horizontal — Vertical — 408px × 544px
Dynamic вертикальная ориентация для Medium Horizontal breakpoint (1600px+)
Live-камеры
DynamicItem
Компонент для отображения динамических карточек (изображения/видео) с автоматическим определением размеров по breakpoint.
Vertical (по умолчанию)
Декабрь 2025
Horizontal
Декабрь 2025
Варианты размещения заголовка
TitleBottom
Декабрь 2025
TitleBottomCenter
Декабрь 2025
TitleTop
Live-камеры
TitleTopLeft
Live-камеры
DynamicItemsSection
Секция с заголовком, навигацией и гибкой разметкой карточек. Первый элемент - видео (горизонтальное на mobile), остальные 7 - изображения.
Live-камеры
Декабрь 2025
Ноябрь 2025
Live-камеры 2
Live-камеры 3
Октябрь 2025
Сентябрь 2025
Live-камеры 4
Август 2025
Июль 2025
Июнь 2025
Май 2025
FactsSwiper
Компонент для отображения карточки с фактами. Поддерживает 7 состояний размеров из Figma: Mobile (0-767px), Small Vertical (768-1023px), Medium Vertical (1024-1279px), Small Horizontal (1280-1599px), Medium Horizontal (1920px+), Large (1280-1599px вертикально), Fullscreen (1920px+ на весь контейнер).
1. Mobile — 390px × 220px
Маленькие карточки для мобильных устройств (0-767px) — из Figma
Видео о комплексе
2. Small Horizontal — 648px × 396px
Маленькие горизонтальные карточки (1280-1599px) — из Figma
Видео о комплексе
3. Small Vertical — 704px × 396px
Маленькие вертикальные карточки (768-1023px) — из Figma
Видео о комплексе
4. Medium Horizontal — 888px × 500px
Средние горизонтальные карточки (1920px+) — из Figma
Видео о комплексе
5. Medium Vertical — 960px × 540px
Средние вертикальные карточки (1024-1279px) — из Figma
Видео о комплексе
6. Large — 960px × 540px (пропорциональное масштабирование)
Большие карточки вертикально (1280-1599px) — из Figma, пропорционально уменьшаются
Видео о комплексе
6. Large — 888px × 592px (пропорциональное масштабирование)
Большие карточки вертикально (1280-1599px) — из Figma, пропорционально уменьшаются
Видео о комплексе
7. Fullscreen — 100% × пропорциональная высота (1792×1008)
На весь контейнер без ограничений по ширине (1920px+), пропорционально масштабируется
Видео о комплексе
Dynamic Item размеры
Размеры из Dynamic Item компонента (Photo/Live карточки)
Dynamic Mobile — 171px × 320px
Dynamic размер для мобильных (0-767px)
Live-камеры
Dynamic Small Vertical — 336px × 320px
Dynamic размер для Small Vertical (768-1023px)
Live-камеры
Dynamic Medium Vertical — 304px × 320px
Dynamic размер для Medium Vertical (1024-1279px)
Live-камеры
Dynamic Small Horizontal — 316px × 320px
Dynamic размер для Small Horizontal (1280-1599px)
Live-камеры
Dynamic Medium Horizontal — 408px × 320px
Dynamic размер для Medium Horizontal (1600px+)
Live-камеры
1. Mobile — 390px × 400px
Маленькие карточки для мобильных устройств (0-767px) — из Figma
2 650
человек будет проживать
в жилом комплексе
2. Small Horizontal — 648px × 396px
Маленькие горизонтальные карточки (1280-1599px) — из Figma
2 650
человек будет проживать
в жилом комплексе
3. Small Vertical — 704px × 396px
Маленькие вертикальные карточки (768-1023px) — из Figma
2 650
человек будет проживать
в жилом комплексе
4. Medium Horizontal — 888px × 500px
Средние горизонтальные карточки (1920px+) — из Figma
2 650
человек будет проживать
в жилом комплексе
5. Medium Vertical — 960px × 540px
Средние вертикальные карточки (1024-1279px) — из Figma
2 650
человек будет проживать
в жилом комплексе
6. Large — 960px × 540px
Большие карточки вертикально (1280-1599px) — из Figma
2 650
человек будет проживать
в жилом комплексе
6. Large — 888px × 592px
Большие карточки вертикально (1280-1599px) — из Figma
2 650
человек будет проживать
в жилом комплексе
7. Fullscreen — 100% × 592px
На весь контейнер без ограничений по ширине (1920px+)
2 650
человек будет проживать
в жилом комплексе
TextMedia
Компонент для отображения текста с медиа блоками (FactsSwiper). Поддерживает тег, заголовок, подзаголовок, медиа блоки и теги. Если блок один - выравнивается по центру.
Пример с двумя медиа блоками
На десктопе блоки расположены горизонтально, на мобильных - вертикально
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.\n\nНа территории будет располагаться два детских сада, школа, торговый центр, спортивный комплекс, ледовая арена, медицинский центр и множество небольших магазинов формата «у дома», которые обеспечат жильцов всем необходимым.
2 650
человек будет проживать
в жилом комплексе
Видео о комплексе
Пример с одним медиа блоком (центрирование)
Когда блок один, он выравнивается по центру с ограничением максимальной ширины
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.\n\nНа территории будет располагаться два детских сада, школа, торговый центр.
2 650
человек будет проживать
в жилом комплексе
Пример без тега
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.
2 650
человек будет проживать
в жилом комплексе
Пример без тегов внизу
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.
2 650
человек будет проживать
в жилом комплексе
Пример с кнопкой действия
Компонент поддерживает кнопку действия, которая отображается после медиа блоков
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.\n\nНа территории будет располагаться два детских сада, школа, торговый центр, спортивный комплекс, ледовая арена, медицинский центр и множество небольших магазинов формата «у дома», которые обеспечат жильцов всем необходимым.
2 650
человек будет проживать
в жилом комплексе
2
детских сада
на территории
Пример с кастомными компонентами
Компонент поддерживает кастомные React компоненты вместо FactsSwiper
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.\n\nНа территории будет располагаться два детских сада, школа, торговый центр.
Кастомный компонент 1
Кастомный компонент 2
Пример с VideoItem (как в макетах)
VideoItem используется в TextMedia через customBlocks, согласно макетам
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух
ЖК Чайка — это спокойный образ жизни, близость к природе, чистый воздух.\n\nНа территории будет располагаться два детских сада, школа, торговый центр, спортивный комплекс, ледовая арена, медицинский центр и множество небольших магазинов формата «у дома», которые обеспечат жильцов всем необходимым.
Видео о комплексе
Генплан
Компонент GenPlan принимает:
• imageSrc — изображение генплана
• width, height — размеры изображения в пикселях
• polygons — массив с path в пикселях изображения
• pins — пины с координатами в пикселях
Decoration Pin + Tooltip
Два отдельных компонента: DecorationPin (пин с анимацией) и Tooltip (карточка с авто-позиционированием).
Тултип по умолчанию открывается справа, если не помещается — слева. Автоматически сдвигается, чтобы не выходить за границы контейнера.
Пример использования (Отделка квартир)
Размеры пинов
Large (1600+) — 40px / 16px → 12px
Medium (1024-1599) — 36px / 14px → 10px
Принудительное позиционирование (Forced)
Можно принудительно указать сторону и выравнивание + дополнительные отступы offsetX/offsetY
Forced: Right / Top
Forced: Left / Bottom