Стандартизированная типография на всем сайте. Далее приведены все стандарты типографии шаблона.

Заголовок H1 (h1, .intec-ui-markup-h1, [data-ui-markup="h1"])

Интернет-магазин (англ. online shop или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.
(p, .intec-ui-markup-p, [data-ui-markup="p"])

При этом продажа товаров осуществляется дистанционным способом и она накладывает ограничения на продаваемые товары.
(blockquote, .intec-ui-markup-blockquote, [data-ui-markup="blockquote"])

Заголовок H2 (h2, .intec-ui-markup-h2, [data-ui-markup="h2"])

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).
(i, .intec-ui-markup-i, [data-ui-markup="i"])

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).
(b, .intec-ui-markup-b, [data-ui-markup="b"])

Заголовок H3 (h3, .intec-ui-markup-h3, [data-ui-markup="h3"])

• Пункт обычного списка
• Пункт обычного списка
• Пункт обычного списка
• Пункт обычного списка
• (ul li, .intec-ui-markup-ul .intec-ui-markup-li, [data-ui-markup="ul"] [data-ui-markup="li"])

Заголовок H4 (h4, .intec-ui-markup-h4, [data-ui-markup="h4"])

1. Пункт нумерованного списка
2. Пункт нумерованного списка
3. Пункт нумерованного списка
4. Пункт нумерованного списка
5. (ol li, .intec-ui-markup-ol .intec-ui-markup-li, [data-ui-markup="ol"] [data-ui-markup="li"])

Заголовок H5 (h5, .intec-ui-markup-h5, [data-ui-markup="h5"])

Ссылка 1,Ссылка 2,Ссылка 3(a, .intec-ui-markup-a, [data-ui-markup="a"])

Заголовок H6 (h6, .intec-ui-markup-h6, [data-ui-markup="h6"])

Горизонтальная линия (hr, .intec-ui-markup-hr, [data-ui-markup="hr"])

Код (code, .intec-ui-markup-code, [data-ui-markup="code"])
<div class="intec-ui-markup-code">
Пример оформления кода
</div>

Имеются классы для работы с margin и padding.

• .intec-ui-p - класс для работы с padding;
• .intec-ui-m - класс для работы с margin.

Использование класса отступов

1. .intec-ui-(m|p)-<значение>;
2. .intec-ui-(m|p)-(t|r|b|l|v|h)-<значение>.

(m|p) означает тип отступа (margin или padding соответственно).(t|r|b|l|v|h) направление отступа (top, right, bottom, left, vertical или horizontal соответственно), v означает отступ сверху и снизу, h - слева и справа.<значение> может иметь none, что означает необходимость убрать отступ, либо значение от 5 до 100 с шагом в 5. В варианте 1, где не указано направление оступа, он будет применен ко всем сторонам.

Каждый элемент интерфейса имеет класс .intec-ui, а также собственный класс .intec-ui-control-<элемент>.

Большинство элементов (кнопки, поля ввода, счетчики) имеют сетку в 4px и стандартную высоту в 32px. Размеры элементов можно менять с помощью класса .intec-ui-size-<размер>, где размер - это число от 1 до 5. Каждый размер увеличивает высоту элемента на 4px.

Все элементы (кроме полей ввода) имеют цветовые схемы. Цветовые схемы задаются с помощью класса .intec-ui-scheme-<схема>
Доступны следующие цветовые схемы:

• current - Текущая цветовая схема сайта
• blue - Синяя цветовая схема
• blue-1 - Синяя цветовая схема 1
• red - Красная цветовая схема
• green - Зеленая цветовая схема
• green-1 - Зеленая цветовая схема 1
• orange - Оранжевая цветовая схема
• gray - Серая цветовая схема

Кнопка (button)

Класс для применения: .intec-ui.intec-ui-control-button.

Блочная кнопка

Для того чтобы сделать кнопку блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Прозрачная кнопка

Для того чтобы сделать кнопку прозрачной, необходимо добавить класс .intec-ui-mod-transparent.

Ссылочная кнопка

Для того чтобы сделать кнопку ссылочной, необходимо добавить класс .intec-ui-mod-link.

Скругление углов

Для того чтобы скруглить углы кнопки, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значениеhalf, то подразумевается скргление углов на половину высоты элемента.

Интерактивная кнопка

Интерактивная кнопка обычно состоит из 2-х частей. Первая часть это контейнер с классом .intec-ui-part-icon (иконка), вторая - .intec-ui-part-content (содержимое кнопки). Кнопка может содержать любое количество частей. Каждая часть может быть расположена в любом месте. Отступ между частями интерактивной кнопки зависит от размеров текста.

Цветовые схемы

Размеры

Поле ввода (input)

Класс для применения: .intec-ui.intec-ui-control-input.

Блочное поле ввода

Для того чтобы сделать поле ввода блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Скругление углов

Для того чтобы скруглить углы поля ввода, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значениеhalf, то подразумевается скргление углов на половину высоты элемента.

Размеры

Числовое поле ввода (numeric)

Класс для применения: .intec-ui.intec-ui-control-numeric.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Цветовые схемы

Размеры

Сообщение или оповещение (alert)

Класс для применения: .intec-ui.intec-ui-control-alert.

Цветовые схемы

Checkbox (checkbox)

Класс для применения: .intec-ui.intec-ui-control-checkbox. Имеет нестандартную сетку.

Размеры

Цветовые схемы

Radio (radiobox)

Класс для применения: .intec-ui.intec-ui-control-radiobox. Имеет нестандартную сетку.

Размеры

Цветовые схемы

Переключатели (switch)

Класс для применения: .intec-ui.intec-ui-control-switch. Имеет нестандартную сетку.

Размеры

Цветовые схемы

Вкладки (tabs)

Класс для применения: .intec-ui.intec-ui-control-tabs. Имеет нестандартную сетку.

Для того чтобы сделать вкладки блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Цветовые схемы

Выравнивание

Имеет выравнивание вкладок слева, справа и по центру. Необходимо добавить класс .intec-ui-mod-position-<значение>, где <значение> - left, right или center. Позиционирование работает только при блочном варианте отображения.