🧩 UI-кит дизайн-системы

Стандартные блочные элементы сайта. Единый CSS — app/pages/static/pages/site.css + сетка Bootstrap 5.0 (grid + utilities, брейкпоинты xs–xxl). Базовая ширина контента — 1400px. Мобильную версию смотрите через адаптивный режим браузера.

1 · Кнопки .btn .btn-primary / .btn-ghost / .btn-light / .btn-sm / .btn-lg
2 · Бейджи и чипы .badge / .chip / .chip-row
Хит Новинка
Для начинающихХатха-йогаАэройогаЙогатерапияАнтистрессДетская
3 · Карточка .card

Заголовок карточки

Простой контейнер для любого содержимого: текст, список, кнопка.

Вторая

Тень, скругление, фон поверхности.

Третья

Базовый строительный блок.

4 · Фото-карточка .card-photo
5 · Фичи (иконка + текст) .feature
🦴

Анатомическая безопасность

Корректное выполнение асан без травм.

🎯

Индивидуальный подход

Любой возраст и уровень.

🧘

Терапевтические направления

Спина, антистресс, пренатальная.

6 · Статистика .stat-band / .stat
2зала в городе
17преподавателей
14направлений
8–22занятия каждый день
7 · Списки .list-check / .list-dot
  • Единый абонемент на оба зала
  • Коврики и пропсы в зале
  • Заморозка абонемента
  • Гибкая система цен
  • Мягкий вход для новичков
  • Глубина для практикующих
  • Доброжелательная атмосфера
  • Индивидуальный подход
8 · Нумерованные шаги .steps
  1. Выберите направление Подберём по уровню и цели.
  2. Запишитесь на пробное Онлайн или по телефону.
  3. Приходите налегке Коврики и пропсы есть в зале.
9 · FAQ-аккордеон .faq
Что взять на первое занятие?

Удобную одежду и воду. Коврики есть в зале.

Я никогда не занимался — нормально?

Да, есть классы для начинающих с нуля.

Абонемент действует в обоих залах?

Да, единый абонемент — на любое занятие в любом зале.

10 · Таблица .table
АбонементЗанятийСрокЦена
Пробное занятие1от ___ ₽
Пакет85 недель___ ₽
Безлимитмесяц30 дней___ ₽
11 · Тарифы .tariff / .featured
Разовое
___ ₽
  • 1 занятие
  • Любое направление
Выбрать
Безлимит
___ ₽
  • Месяц без ограничений
  • Оба зала
Выбрать
12 · Офферы .offers / .offer.hot

Пробное занятие

от ___ ₽

Знакомство с практикой.

Записаться
выгоднее всего

Тест-драйв

2 — ___ ₽

Два класса на выбор.

Записаться

Скидка в день визита

−__%

На абонемент.

Цены
13 · Отзывы (карусель) .reviews / .review
★★★★★

«Через месяц забыла про боли в спине. Тренер внимательный, группы небольшие.»

Пример отзыва
★★★★★

«На классе для начинающих всё объясняют с нуля. Хожу с удовольствием.»

Пример отзыва
★★★★★

«Удобно, что абонемент на оба зала. Брала йогу для беременных.»

Пример отзыва
★★★★★

«Спокойная атмосфера, после работы — лучшее, что можно придумать.»

Пример отзыва
★★★★★

«Через месяц забыла про боли в спине. Тренер внимательный, группы небольшие.»

Пример отзыва
★★★★★

«На классе для начинающих всё объясняют с нуля. Хожу с удовольствием.»

Пример отзыва
★★★★★

«Удобно, что абонемент на оба зала. Брала йогу для беременных.»

Пример отзыва
★★★★★

«Спокойная атмосфера, после работы — лучшее, что можно придумать.»

Пример отзыва

Понравилось у нас? Поделитесь впечатлением — это помогает другим решиться на первое занятие.

14 · Преподаватели .tcard
15 · Карточки направлений .dir-grid / .dir
16 · Мини-герой страницы .subhero

Хатха-йога в Чебоксарах

Классическая практика для тела и ума — для любого уровня.

17 · Хлебные крошки .crumbs
18 · Сплит текст + фото .split

Место, куда хочется возвращаться

Доброжелательная атмосфера и индивидуальный подход к каждому, независимо от возраста и уровня.

О студии
19 · Цитата .quote

«Йога — это не про гибкость тела, а про устойчивость ума.»

Преподаватель центра
20 · Заметки / алерты .note.info / .warn / .ok
Информационный блок — нейтральная подсказка.
Предупреждение — на что обратить внимание.
Успех — действие выполнено.
21 · Контакт-карточка .contact

Зал на пр. Ленина, 25к1

г. Чебоксары, пр. Ленина, 25, корп. 1

+7 (8352) 273-108

Зал на пр. М. Горького, 26

г. Чебоксары, пр. М. Горького, 26

+7 927-668-62-68
22 · Карта .map-wrap
23 · Мессенджеры .msgs / .msg
24 · CTA-полоса .band

Запишитесь на пробное занятие

Подберём направление и удобное время.

25 · Ценности .value-grid / .value
🌿

Природность

Спокойствие и забота о теле.

💪

Сила

От мягкого до интенсива.

🧠

Осознанность

Внимание к дыханию и уму.

26 · Легенда уровней .levels / .level
очень лёгкий лёгкий средний продвинутый
27 · Аватар .avatar
28 · Галерея .gallery
29 · Факты .facts / .fact
10+лет практики
2зала
14направлений
1000+учеников
30 · Иконка-список (горизонт.) .iconlist
🕐 8:00–22:00 ежедневно📍 2 зала в центре🎫 Единый абонемент
31 · Секция + заголовок .section / .head

Заголовок секции

Подзаголовок-описание с выравниванием по левому краю.

32 · Подвал .foot
33 · Текстовый блок .prose / обычный текст

Это обычный текстовый блок — для статей блога, описаний направлений и юридических страниц. Базовый размер 18px, межстрочный интервал 1.7, комфортная длина строки до ~75 символов.

Внутри текста работают ссылки, полужирный и курсив. Абзацы разделены вертикальным ритмом, заголовки внутри статьи задаются тегами h2/h3 из дизайн-системы.

На мобильном размер шрифта увеличивается для читаемости. Этот же блок используется на контент-страницах сайта.

Всего блоков: 33. Все используют единый site.css — страницы сайта собираются из них без нового CSS.