Визуальный каталог cards.css

В данном шоуруме представлены все абстрактные стили карточек, выделенные в файл cards.css. Вы можете использовать данные классы и их связки (модификаторы) для быстрого создания консистентных блоков по всему проекту BonusPlus.

Базовые классы и Анимация подъема

Базовые структуры карточек с поддержкой плавных трансформаций при наведении курсора.

Hover Lift (Плавный подъем)

При наведении карточка смещается вверх на 4px, имитируя левитацию.

.bp-card .bp-card--lift

Используется на страницах со списками документов, шагами и второстепенными элементами.

class="bp-card bp-card--lift"

Strong Lift (Акцентный подъем)

Более выраженный подъем на 6px с мягкой кривой Безье для динамичности.

.bp-card .bp-card--lift-strong

Отлично подходит для важных кликабельных разделов и главных ссылок меню.

class="bp-card bp-card--lift-strong"

Cyan Glow (Голубое свечение)

Эффект мягкого внутреннего свечения и подсветки рамки цветом бирюзы при наведении.

.bp-card .bp-card--lift .bp-card--glow-cyan

Используется для активных кнопок и карточек, требующих особого фокуса.

class="bp-card bp-card--lift bp-card--glow-cyan"

Функции и Блоки (Feature Cards)

Карточки функциональных преимуществ с возможностью горизонтального расширения.

Стандартная фича

Используется для перечисления основных характеристик модулей аналитики и маркетинга.

.bp-card .bp-card--feature .bp-card--lift

Задает скругление 16px и фон --background-secondary.

class="bp-card bp-card--feature bp-card--lift"

Широкая карточка-фича

Располагает иконку и контент горизонтально в ряд с отступом 20px.

.bp-card .bp-card--feature .bp-card--wide .bp-card--lift

Применяет горизонтальный flex-layout для широких карточек в два столбца.

class="bp-card bp-card--feature bp-card--wide"

Свечения и Градиенты (Glow, Radial, Flat, Corner, Gradients)

Карточки со сложными фоновыми подложками, радиальными градиентами и эффектами размытого свечения.

Flat Glow Card

Мягкий фон rgba-белого и легкая рамка, подсвечиваемая бирюзовым цветом при наведении.

.bp-card .bp-card--flat-glow

Используется на главной странице "О компании" и в документах SLA.

class="bp-card bp-card--flat-glow"

Subtle Glow Card

Выровненный по центру контент с изящным полупрозрачным фоном скруглением 12px.

.bp-card .bp-card--subtle-glow

Используется для преимуществ на странице регистрации.

class="bp-card bp-card--subtle-glow"

Interactive Glow Card

Энергичный отскок вверх и яркое голубое свечение с тенью при наведении.

.bp-card .bp-card--interactive-glow

Используется для выбора методов регистрации (СМС, Бот и др.).

class="bp-card bp-card--interactive-glow"

Radial Glow Card

Радиальный градиент в углу карточки, создающий эффект внутреннего технологичного свечения.

.bp-card .bp-card--radial-glow

Разработано специально для блоков CRM страниц клиентов.

class="bp-card bp-card--radial-glow"

Dashed Glow Card

Штриховая бирюзовая граница и легкий фон.

.bp-card .bp-card--dashed-glow .bp-card__icon .bp-card__content

Используется в блоке Hero на странице коммуникаций.

class="bp-card bp-card--dashed-glow"

Corner Glow Card

Неявное угловое свечение, которое становится ярче при наведении за счет ::before псевдоэлемента.

.bp-card .bp-card--corner-glow

Применяется на странице каналов коммуникаций.

class="bp-card bp-card--corner-glow"

Gradient Bg Card (Accent)

Заливка градиентом от желтого к бирюзовому. Текст инвертирован для читаемости.

.bp-card .bp-card--flat-glow .bp-card--gradient-bg

Используется как акцентная (главная) карточка в SLA и контактах поддержки.

class="bp-card bp-card--flat-glow bp-card--gradient-bg"

Сетки и Специфичные сетки (Grid Cards)

Карточки со сквозными разделительными границами для создания красивых структурированных таблиц.

Шаг 1

Подключение кассового ПО

Шаг 2

Настройка программы лояльности

Шаг 3

Запуск первой акции

.bp-card .bp-card--grid .bp-card--grid-bordered .bp-card--grid-border-x .bp-card--grid-border-bottom

Используется в разделе "Решения" и "Партнеры" для выравнивания шагов интеграции в аккуратную модульную сетку с эффектом легкого сдвига содержимого при наведении.

CTA и Двойное свечение

Широкие карточки призыва к действию с крупным текстом, иконками и кнопками.

Начните прямо сейчас

Первые 14 дней бесплатно. Полный доступ ко всем функциям.

.bp-card .bp-card--cta .bp-card--cta-row

Горизонтальный CTA-блок с внутренним выравниванием и автопереносом на мобильных устройствах.

class="bp-card bp-card--cta bp-card--cta-row"

Широкий CTA-баннер

Растягивается на всю ширину экрана с подсветкой рамки при ховере.

.bp-card .bp-card--cta .bp-card--cta-wide .bp-card__icon .bp-card__content

Используется на страницах маркетинговых акций в самом низу страницы перед футером.

CTA Soft Glow Card

Мягкий фон с линейным градиентом от бирюзового к желтому и бирюзовая обводка.

.bp-card .bp-card--cta-soft-glow

Используется в финальном блоке на странице коммуникаций.

class="bp-card bp-card--cta-soft-glow"

Dual Glow CTA Card

Сложный бэкграунд с двумя перекрестными свечениями (голубым слева-сверху и желтым справа-снизу).

.bp-card .bp-card--cta-dual-glow .bp-card__icon .bp-card__content

Создан для финальных призывов к действию на продуктовых страницах (внедрен на странице CRM).

class="bp-card bp-card--cta-dual-glow"

Кнопки и Группы кнопок (buttons.css)

Все разновидности кнопок и управляющих элементов, используемые в проекте.

.btn

Имеет размер текста 16px. Прозрачный фон с белым текстом по умолчанию.

<button class="btn">Обычная кнопка</button>
.btn .btn-sm

Уменьшенный размер текста (14px) и паддинги для второстепенных действий.

<button class="btn btn-sm">Маленькая кнопка</button>
.btn .btn-yellow

Основной акцентный желтый цвет (цвета бренда). Текст темный для контрастности.

<button class="btn btn-yellow">Желтая кнопка</button>
.btn .btn-yellow-outline

Вторичная кнопка с желтой границей и прозрачным фоном.

<button class="btn btn-yellow-outline">Контурная желтая</button>
.button-group

Flex-контейнер для группы кнопок с отступом (gap) 20px.

<div class="button-group">...</div>
.btn .btn-fill

На мобильных устройствах (<768px) кнопка растягивается на всю ширину экрана.

class="btn btn-yellow btn-fill"

Типографика, Цвета и KPI (variables.css & styles.css)

Основные текстовые стили, заголовки, цветовые классы и оформление больших числовых показателей.

Заголовки (Headings)

Заголовок H1 (3.5rem / mob: 2.5rem)

Заголовок H2 (2.5rem / mob: 1.75rem)

Заголовок H3 (1.5rem / mob: 1.25rem)

Заголовок H4 (1.25rem / mob: 1rem)

Классы размеров текста

Класс .lead (1.125rem) — для первого абзаца статьи или описания.

Класс .body16 / p (1rem) — стандартный основной текст.

Класс .body14 (0.875rem) — уменьшенный текст (подписи, карточки).

Класс .body12 (0.75rem) — очень мелкий текст (дисклеймеры, сноски).

Цветовые утилиты текста

Класс .text-primary (Белый основной)
Класс .text-secondary (Светло-серый вторичный #CACACA)
Класс .text-disabled (Полупрозрачный белый для неактивных элементов)
Класс .text-subtle (Темный #0F1E1E для размещения на желтом фоне)
Светящийся акцентный текст с классом .highlight (бирюзовый неон)

Большие цифры (KPI / Data)

99.8 %
h1 - h4 .lead .body16 .body14 .body12 .highlight .kpi .kpi-suf

Используются для оформления всей текстовой разметки и показателей результативности на страницах аналитики и кейсов.