HI-M • Bento UI Guide

Гид по блокам, стилям и компоновке новой системы hm-bn-*

Эта страница показывает все основные визуальные паттерны новой схемы: тексты, карточки, списки, элементы, price-блоки, сетки, композиции и готовые фрагменты кода.

Смотреть типографику Смотреть сетки

Концепция Тексты Карточки Списки Price Сетки Код

Что это за система

Это изолированный слой для информационных страниц. Он собирается только внутри .hm-bn-page, не ломает core storefront и не вмешивается в системную логику CS-Cart.

Один namespace: hm-bn-*
Light UI и мягкие поверхности
До 4 колонок, но 2–3 — базовые
Градиенты — только как редкий акцент
ty-btn и ty-icon используются локально и безопасно

1. Концепция

Логика работы новой схемы

Новая система нужна не для «дизайна ради дизайна», а для повторяемой сборки информационных страниц без хаотичной ручной стилизации.

Из чего состоит страница

Root wrapper .hm-bn-page
Секции и контейнеры
Grid 1 / 2 / 3 / 4
Карточки и модификаторы
Текстовые стили и action-зоны

Базовый порядок страницы

Hero или вводный блок
Преимущества / ключевые смыслы
Основное пояснение
Факты, шаги, сравнение или price-паттерны
FAQ / примечание
Финальный CTA

Если страницу можно решить простыми повторяемыми блоками — значит так и нужно делать. Новая схема должна упрощать масштабирование, а не усложнять его.

2. Типографика

Стили текста и уровни иерархии

Типографика делит контент на смысловые уровни: от входного заголовка до служебной подписи.

Eyebrow

Overline

Пример Page Title

Пример Section Title

Пример Card Title

Lead-текст нужен для первого спокойного пояснения под hero или заголовком секции.

Body-текст — основной рабочий формат для длинных пояснений, инструкций, правил и смысловых переходов.

Muted — второстепенное пояснение, которое не спорит с главным контентом.

Meta — подпись, статус, короткая служебная строка.

Small — примечание и очень компактная вспомогательная информация.

Когда использовать

Page Title — только один раз на странице
Section Title — начало смысловой секции
Card Title — внутри карточек и локальных блоков
Lead — вход в тему
Body — основное объяснение
Muted / Meta / Small — вторичный уровень

Норма: длинный контент должен оставаться спокойным и легко читаемым.

3. Карточки и поверхности

Базовые стили блоков

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

Base card

Нейтральный основной блок.

Soft card

Мягкая вторичная поверхность.

Accent card

Ненавязчивое выделение важного блока.

Outlined card

Рамка без тяжёлой глубины.

Gradient card

Редкий premium-accent для hero, promo и CTA.

Note card

Примечание, пояснение, уточнение или важный акцент.

Warning card

Предупреждение или важное ограничение.

24

варианта

Стиль для метрик и коротких числовых тезисов.

CTA card

Карточка призыва к действию или перехода.

К коду

4. Элементы внутри блоков

Иконки, теги, action-row, divider, media, metric

Icon wrapper

Базовый контейнер для системной иконки.

Accent icon

Акцентный вариант иконки для выделенных карточек.

3x

быстрее сборка

Metric-паттерн для фактов и цифр.

Tag row

Light UI Bento hm-bn-*

Action row

Primary Secondary

Divider

Делит внутренние смысловые части карточки.

Вторая часть блока отделена визуально.

Media slot

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

Inline link

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

5. Списки

Варианты списков и их назначение

Здесь списки специально разведены визуально, чтобы редактор сразу видел, какой вариант подходит для какой задачи.

Clean list

Нейтральное перечисление без сильного акцента
Подходит для структуры, порядка, перечней
Хорош для спокойных информационных блоков
Визуально держится на ритме линий

Icon list

Подходит для свойств и признаков
Мягкий квадратный маркер
Без давления, но заметнее clean list
Хорош для benefit-блоков

Check list

Сильнее всего визуально
Подходит для подтверждённых тезисов
Хорош для правил, преимуществ, финальных выводов
Использовать умеренно

Compact list

Короткие плотные пункты
Подходит для small-format секций
Хорош в блоках с малой высотой
Не использовать для длинных описаний

Код списков

<ul class="hm-bn-list--clean">...</ul>
<ul class="hm-bn-list--icon">...</ul>
<ul class="hm-bn-list--check">...</ul>
<ul class="hm-bn-list--compact">...</ul>

6. Price blocks

Примеры оформления цены

Price-паттерны нужны для тарифов, услуг, акций, сравнительных блоков и финальных CTA-секций.

Обычная цена

3 900 ₽

/ 30 дней

Подходит для базового ценового блока.

Цена со старой ценой

2 900 ₽

3 900 ₽

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

Цена с badge

5 900 ₽

Популярный

Подходит для тарифа с мягким акцентом.

Цена «от»

от

1 500 ₽

Подходит для услуг и индивидуальных работ.

Price в CTA-карточке

4 900 ₽

/ месяц

Основной тариф с вынесенной ценой и действием.

Подключить

Price range

2 900–7 900 ₽

Подходит для диапазона услуг или пакетов.

Код price-блока

<div class="hm-bn-card">
    <h3 class="hm-bn-card__title">Обычная цена</h3>
    <div class="hm-bn-price">
        <p class="hm-bn-price__current">3 900 <span class="hm-bn-price__currency">₽</span></p>
        <p class="hm-bn-price__period">/ 30 дней</p>
    </div>
    <p class="hm-bn-price__note">Подпись под ценой</p>
</div>

7. Сетки и композиции

Варианты компоновки блоков и колонок

Основной рабочий режим — 2 и 3 колонки. 4 колонки допустимы только для кратких карточек.

1 колонка

Для длинного текста, юридических пояснений, note-блоков и вводных секций.

2 колонки — левый блок

Универсальный режим для большинства смысловых секций.

2 колонки — правый блок

Подходит для comparison, steps, text + support-card.

3 колонки

Преимущества и равноправные карточки.

3 колонки

FAQ-плитки и contact-блоки.

3 колонки

Основной desktop-режим.

1

Мини-карточка

2

Мини-карточка

3

Мини-карточка

4

Мини-карточка

Широкая карточка span-2

Это центральный смысловой блок секции. Он должен задавать тему всей композиции, содержать главный тезис и визуально удерживать внимание.

Anchor card Span-2 Wide content

Средняя карточка

Поддерживает основной тезис.

Средняя карточка

Второй поддерживающий аргумент.

A

Малая

B

Малая

C

Малая

D

Малая

Если карточки начинают требовать много текста — это уже сигнал вернуться с 4 колонок на 3 или 2.

8. Готовые блоки

Типовые паттерны для страниц

Intro block

Вводный смысловой блок после hero. Быстро объясняет, для кого страница и что она даёт.

Benefits block

Блок равноправных карточек с краткими тезисами и преимуществами.

1

Steps block

Для этапов, порядка действий, алгоритмов.

72%

Stats block

Для цифр, фактов и коротких доказательств.

Note / Important

Для условий, ограничений и акцентных пояснений.

Что такое FAQ block?

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

Когда его использовать?

Когда нужно быстро снять повторяющиеся вопросы пользователя.

Comparison block — вариант 1

Первый подход
Базовый сценарий
Меньше плотность контента

Comparison block — вариант 2

Второй подход
Акцентный сценарий
Более сильное сравнение

CTA strip

Пример финального действия

Это широкий завершающий блок с главным действием на странице.

Основной CTA Дополнительный CTA

9. Готовые фрагменты кода

Быстрые шаблоны для копирования

Hero block

<div class="hm-bn-hero">
    <div class="hm-bn-hero__content">
        <p class="hm-bn-eyebrow">HI-M</p>
        <h1 class="hm-bn-page-title">Заголовок страницы</h1>
        <p class="hm-bn-lead">Вводное описание...</p>
        <div class="hm-bn-actions">
            <a href="#" class="ty-btn ty-btn__primary">Основной CTA</a>
            <a href="#" class="ty-btn ty-btn__secondary">Вторичный CTA</a>
        </div>
    </div>
    <div class="hm-bn-card hm-bn-card--gradient">...</div>
</div>

Benefits / 3 cards

<div class="hm-bn-grid hm-bn-grid--3">
    <div class="hm-bn-card">...</div>
    <div class="hm-bn-card hm-bn-card--soft">...</div>
    <div class="hm-bn-card hm-bn-card--accent">...</div>
</div>

Price block

<div class="hm-bn-price">
    <p class="hm-bn-price__current">3 900 <span class="hm-bn-price__currency">₽</span></p>
    <p class="hm-bn-price__period">/ 30 дней</p>
</div>

Wide span-2 card

<div class="hm-bn-card hm-bn-card--gradient hm-bn-card--feature-wide hm-bn-span-2">
    <div class="hm-bn-card__content">
        <h3 class="hm-bn-card__title">Широкая карточка</h3>
        <p class="hm-bn-body">Основной тезис...</p>
        <div class="hm-bn-tag-row">
            <span class="hm-bn-tag">Anchor card</span>
        </div>
    </div>
</div>

Итог

Исправленный guide теперь показывает все ключевые паттерны

В этой версии есть нормальные демонстрации списков, отдельные price-блоки, исправленная широкая карточка и более контрастные кнопки для guide-страниц.

Наверх страницы К шаблонам