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

Заголовок 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. Имеет нестандартную сетку.

Пункт 1
Пункт 2
Пункт 3

Размеры

Пункт
Пункт (1)
Пункт (2)
Пункт (3)
Пункт (4)
Пункт (5)

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

Пункт
Пункт (current)
Пункт (blue)
Пункт (blue-1)
Пункт (red)
Пункт (green)
Пункт (green-1)
Пункт (orange)
Пункт (gray)

---

Radio (radiobox)

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

Пункт 1
Пункт 2
Пункт 3

Размеры

Пункт Пункт
Пункт (1) Пункт (1)
Пункт (2) Пункт (2)
Пункт (3) Пункт (3)
Пункт (4) Пункт (4)
Пункт (5) Пункт (5)

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

Пункт Пункт
Пункт (current) Пункт (current)
Пункт (blue) Пункт (blue)
Пункт (blue-1) Пункт (blue-1)
Пункт (red) Пункт (red)
Пункт (green) Пункт (green)
Пункт (green-1) Пункт (green-1)
Пункт (orange) Пункт (orange)
Пункт (gray) Пункт (gray)

---

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

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

Пункт 1
Пункт 2
Пункт 3

Размеры

Пункт
Пункт (1)
Пункт (2)
Пункт (3)
Пункт (4)
Пункт (5)

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

Пункт
Пункт (current)
Пункт (blue)
Пункт (blue-1)
Пункт (red)
Пункт (green)
Пункт (green-1)
Пункт (orange)
Пункт (gray)

---

Вкладки (tabs)

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

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

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

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

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

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

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