Стандартные компоненты

Видео кнопка

В компоненте есть всего один элемент микро-разметки.
cr-video-button — Элемент, по клику которого будет открываться окно с видео.

Спойлер

Функционал компонента «Спойлер» заключается в двух атрибутах.
 
cr-spoiler-container — элемент с этим атрибутом будет скрываться или показываться.
cr-spoiler-toggle — элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом cr-spoiler-container.
 
И cr-spoiler-container и cr-spoiler-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.
 
Верстка компонента при этом может быть произвольной. Элемент с атрибутами, указанными выше, могут располагаться в любом месте.
 
Вы можете сделать даже несколько элементов с атрибутом cr-spoiler-container и несколько с атрибутом cr-spoiler-toggle, и все будет работать.

Слайдер и вкладки

Слайдер и вкладки внутри устроены одинаково.
Элемент, в котором размещены слайды, помечается атрибутом cr-slider-container. Слайды (или вкладки) помещаются туда автоматически.

Перелистывание

Кнопка перелистывания вперед помечается атрибутом cr-slider-next.
Кнопка перелистывания назад помечается атрибутом cr-slider-previous.

Список слайдов

Чтобы сделать точки для каждого слайда необходимо использовать атрибут cr-slider-pagination. При том внутри элемента с этим атрибутом должен находиться всегда только 1 элемент с атрибутом cr-slider-page.
 
Пример:

<div cr-slider-pagination>
    <div cr-slider-page></div>
</div>

Для каждого слайда элемент cr-slider-page будет продублирован. Элемент, указывающий на активный слайд, будет иметь класс is-active.
Внутри cr-slider-page можно использовать произвольную верстку. Доступны так же следующие специальные элементы:
cr-slider-page_number - номер слайда cr-slider-page_label - название слайда cr-slider-page_icon - иконка слайда. Для указания цвета иконки используйте атрибут color.
Пример:

<div cr-slider-pagination>
  <div cr-slider-page>
    <div cr-slider-page_icon color="white"></div>
  </div>
</div>

Секция Слайдер

Идентично компоненту «Слайдер», только не используется элемент cr-slider-container.
При этом весь редактируемый HTML код помещен внутрь position:absolute элемента, растянутого по ширине и высоте всей секции.
Если нужно обратиться к CSS-свойствам слайда, можно использовать селектор .section-slider-container.

Меню-гамбургер

Как и в спойлере, и cr-hamburger-menu и cr-hamburger-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.
cr-hamburger-toggle — Элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом cr-hamburger-menu.
cr-hamburger-menu — Элемент с меню. Не должен находиться внутри cr-hamburger-root. На мобильных устройствах будет скрываться или показываться по клику по cr-hamburger-toggle. На остальных устройствах будет всегда показан.
cr-hamburger-root — Корневой элемент мобильного меню. Будет показан только на мобильных устройствах.
В компоненте «меню-гамбургер» есть 3 ключевых элемента.

Счетчик

Для работы компонента необходимо обозначит корневой элемент, который будет использоваться в качестве шаблона.
Для этого используется атрибут cr-countdown-root.
Далее, в коде компонента можно использовать заготовленные переменные для показа цифр.
 
Дни

• {{_dn}} — количество дней. Может быть 0, 4, 12, 143 и т.д.
• {{_dnn}} — количество дней с двумя цифрами и больше. Может быть 00, 04, 143 и т.д.
• {{_d1}} — цифра от 0 од 9, единицы дней. Это может быть "4" от "4" дней или "2" от "12" дней или "3" от "143" дней.
• {{_d10}} — цифра от 0 од 9, десятки дней. Это может быть "0" от "4" дней или "1" от "12" дней или "4" от "143" дней.
• {{_dl}} — текст "День", "Дней" или "Дня" в зависимости от количества дней.

Часы
 
Те же переменные, что и в днях, но с "h" вместо "d".
{{_hn}}, {{_hnn}}, {{_h1}}, {{_h10}}, {{_hl}}
 
Минуты
 
Те же переменные, что и в днях, но с "m" вместо "d".
{{_mn}}, {{_mnn}}, {{_m1}}, {{_m10}}, {{_ml}}
 
Секунды
 
Те же переменные, что и в днях, но с "s" вместо "d".
{{_sn}}, {{_snn}}, {{_s1}}, {{_s10}}, {{_sl}}
Корректная работа динамических компонентов, таких как слайдер, видео и т.д., внутри элемента с атрибутом cr-countdown-root не гарантируется.