HTML блоки для вставки в детальное описание

Некоторые элементы сложно уместить в качестве статичных блоков, такие элементы вынесены в данную статью.

Ниже представлены фрагменты HTML верстки или данные по классам в которые нужно обернуть ваш текст, чтобы на сайте он выглядел согласно шаблону.

Стили уже прописаны

Все блоки вставляются по одному принципу. В поле “детальное описание”, найдите нужный участок кода, вставьте код нужного блока

Удалите комментарии ( то что между ) и на их место добавьте свой текст

После каждого статичного блока описанного в статьях руководства добавлен блок для вывода HTML верстки. На тот случай если вам нужно вставить цитату, infobox таблицу и т.д.После каждого статичного блока описанного в статьях руководства добавлен блок для вывода HTML верстки. На тот случай если вам нужно вставить цитату, infobox таблицу и т.д.

Блоки выведены для удобства рядом и называются примерно так:

Блок MaintenanceCards – HTML/TEXT:
Блок MistakesBlock – HTML/TEXT:
и тд

QuoteBlock - Цитата

Table - Таблица

Если вам потребовалось вставить а описание таблицу. Не используйте никаких лишних тегов и классов

классы для таблицы class="table table-bordered table-full-width"

StepByStep - Шаги

Button - кнопка /ссылка

Для добавления кнопки-ссылки пропишите следующую структуру верстки. Классы будут описаны ниже

class="btn btn-default mb-10 mr-10" - Default

class="btn btn-default btn-primary mb-10 mr-10" - Primary

class="btn btn-default btn-success mb-10 mr-10" - Success

class="btn btn-default btn-info mb-10 mr-10" - Info

class="btn btn-default btn-warning mb-10 mr-10" - Warning

class="btn btn-default btn-danger mb-10 mr-10" - Danger

class="btn btn-default btn-white mb-10 mr-10" - White

class="btn btn-transparent mb-10 mr-10" - Transparent

class="btn btn-default mb-10 mr-10 btn-transparent-bg" - Transparent with border

InfoBox

info - голубой

warning - желтый

success - зеленый

error - красный

tip - фиолетовый

Табы / Tabs

Пример верстки

Шаблон

Если вам нужно больше табов

вставляйте

после первого

замените href="#ancor1" вместо #ancor1 на что то уникальное, это ключевой идетификатор для связки таба с текстом

не забудьте решетку перед текстом ( латинские буквы)

вставьте

после второго

и замените id="ancor1" на новый идентификатор, что вы установили в прошлом блоке после решетки

Здесь решетка не нужна

Вставка изображений / IMAGE

Контейнер для изображения, который полностью заполняет отведённое ему место - картинка растягивается на всю ширину контейнера. Блок состоит из обёртки <div class="image-content"> и вложенного тега <img>.

В src нужно указать путь к изображению - это может быть внешняя ссылка или ссылка на файл внутри сайта.

Внешняя ссылка - полный адрес картинки, размещённой на другом ресурсе. Использовать не рекомендуется: если файл на чужом сайте удалят, картинка пропадёт и у вас.
Внутренняя ссылка - путь к файлу, загруженному на ваш сервер через админку сайта. Это основной и предпочтительный вариант.В alt укажите краткое описание картинки

Шаблон / пример

Внешняя ссылка

Внутренняя ссылка

! Чек лист - Данный блок еще в работе

Пример

Заголовок блока

<h2 class="check-block__title">
Чек-лист по выбору генератора для СТО
</h2>

Подзаголовок

<h3 class="check-block__sub-title">
Чек-лист монтажа
</h3>

Текст пунктов чек-листа

<span class="custom-label">
Список оборудования и пусковых токов составлен
</span>

Каждый такой элемент — отдельный пункт списка.

Как добавить новый пункт

Для добавления нового пункта нужно полностью скопировать один элемент:

И вставить его ниже внутри блока:

После вставки заменить только текст внутри:

Во избежание поломки работы чек-листа нельзя:

Интеграторам