Кнопки

Поля форм

Состояние поля

Чекбокс

Радио

Размер текста

Жирность начертания текста

Цветовое выделение текста

Списки

По умолчанию ul

• Элемент списка
• Элемент списка

ul.ul-disk

• Элемент списка
• Элемент списка

ul.ul-check

• Элемент списка
• Элемент списка

ul.ul-plus

• Элемент списка
• Элемент списка

ul.ul-num

• Элемент списка
• Элемент списка

bcp-card

Снижение расходов на собственную инфраструктуру

Баннер. По умолчанию .bcp-banner

Баннер. Компактный .bcp-banner.bcp-banner_compact

В компактном баннере уменьшены вертикальные отступы от края, и уменьшен размер заголовка

Рекомендации к баннерам:

• Если не задавать фоновое изображение, то для элементов баннера по умолчанию будет задан светлый фон.
• .bcp-banner__item_inverse - модификатор для элементов баннера с темным фоном. Делает все текстовые элементы светлыми, а цвет фона по умолчанию будет темным.
• Если у баннера всего один элемент - элементы навигации не будут отображаться. Зацикливание и автопрокрутка баннера будут отменены.
• Высота баннера неограниченна. Любой контент не навредит целостности верстки.
• Верхняя и нижня части левой стороны баннера, при наличии изображения в правой стороне, будут равноудаляться друг от друга.
• Следует обратить внимание, что у баннера нет вертикальных отступов со стороны изображения. Отступы должны регламентироваться обрезкой самого изображения.
• Ориентирование изображения по вертикали:
  По умолчанию: выровнять изображение по центру .align-items-center
  Опционально: выровнять изображение по верхнему краю .align-items-start
  Опционально: выровнять изображение по нижнему краю .align-items-end

Баннер в контентной области. По умолчанию .bcp-banner-narrow

Интерактивный информационный блок

Рекомендации к блоку с персонажами:

• Блок поддерживает только три элемента
• В админке предоставить выбор между шестью вариантами персонажей:

bcp-person-w-1.png

bcp-person-w-2.png

bcp-person-w-3.png

bcp-person-m-1.png

bcp-person-m-2.png

bcp-person-m-3.png

• Селектор с персонажем можно отразить по горизонтали с помощью класса .mirror:

bcp-person-w-1.png

bcp-person-w-1.png

Заявки

Иконки-преимущества

Блоки типа «Продукты»

Рекомендации к блокам типа «Продукты»:

.bcp-product-preview_bordered задаст элементам товаров рамку.
Если рамка не нужна, необходимо задать фоновый цвет.

Lorem ipsum dolor sit amet.

от 12 000 руб.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, totam.

Подробнее

.bcp-product-preview_text-short задаст текстовому контенту ограничение по ширине. Необходимо, когда у товара есть изображение

Lorem ipsum dolor sit amet.

от 12 000 руб.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, totam.

Подробнее

Элементам товаров можно добавлять иконки, перед заголовком

Lorem ipsum dolor sit amet.

от 12 000 руб.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, totam.

Подробнее

Элементам товаров можно добавлять кнопку

Lorem ipsum dolor sit amet.

от 12 000 руб.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, totam.

Подробнее

Попробовать

Блоки типа «Карточки с текстом»

Блоки типа «Разное»

Последовательные шаги

Рекомендации к блоку с изогнутыми стрелками:

• Блок с изогнутыми стрелками - принципиально новый элемент.
  Он хоть и использует уже имеющиеся элементы, однако имеет существенные отличия в разметке.
• Элементы с иконками должны быть разбиты на группы (столбцы в представлении),
• Максимально, в одном родительском элементе можно использовать три группы, минимально - одну.
• Теоретически, количество элементов в группе может быть любым, однако, скорее всего, будет проще программно бить элементы на равные группы, и не выносить это в настройки.
• Внимание: заголовок в элементах иконок не допускается. Связано с ограничением текстового блока по высоте в 5 строк, для единой высоты элементов в разных группах.
• Для элементов сохраняются настройки предсталения с круглыми иконками и рамкой для иконок

Ниже представлены варианты использования блока с изогнутыми стрелками

Блоки типа «Слайдеры»

Блоки типа «Картинка + иконки»

Рекомендации к блоку типа «Картинка + иконки»:

• Внутри элемента может быть как одно, так и несколько изображений в виде слайдера.
• Если у слайдера всего один элемент - элементы навигации не будут отображаться. Зацикливание и автопрокрутка слайдера будут отменены.
• Реализовано дополнительное оформление для вставки скриншотов к мобильным и настольным устройствам:
  bcp-slider-icons__item_screenshot--phone - для отображения скриншота в мобильном устройстве
  bcp-slider-icons__item_screenshot--desktop - для отображения скриншота в настольном ПК
  
• Следует обратить внимание:
  Для скриншотов требуется обработать изображения в правильном соотношении сторон.
  Для скриншотов настольных ПК требуются изображения в соотношении сторон 3:2 (хорошо подойдут изображения 450x300 px)
  Для скриншотов мобильных устройств требуются изображения в соотношении сторон 2:3 (хорошо подойдут изображения 300x450 px)

Блоки типа «Функциональные»

Блоки типа «Простые текстовые»