Руководство по стилю

Цвета

Управление основными цветами и оттенками серого на сайте осуществляется с помощью функции Variable в Webflow.

Черный

Серый 1

Серый 2

Белый

Кнопки

На сайте представлены различные стили кнопок.

Заголовки HTML

Стили для тегов заголовков HTML (H1-H6).

H1
Все заголовки H1

Заголовки - H1

H2
Все заголовки H2

Заголовок - H2

H3
Все заголовки H3

Заголовок - H3

H4
Все заголовки H4

Заголовок - H4

H5
Все заголовки H5
Заголовок - H5
H6
Все заголовки H6
Заголовок - H6
H1
Заголовок H1
Заголовок H1
H2
Заголовок H2
Заголовок H2
H3
Заголовок H3
Заголовок H3
H4
Заголовок H4
Заголовок H4
H5
Заголовок H5
Заголовок H5
H6
Заголовок H6
Заголовок H6
Параграфы

Доступны различные размеры абзацев и стилизация текста.

P
Все параграфы

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

P
Текстовый свинец

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

P
Текст маленький

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Элементы встроенного текста

Стилизация для обычных строчных элементов.

P
Текстовый знак

Suspendisse varius enim in highlight eros elementum tristique.

D
Удаление текста

Suspendisse varius enim in highlight eros elementum tristique.

U
Подчеркивание текста

Suspendisse varius enim in highlight eros elementum tristique.

B
Текст полужирный

Suspendisse varius enim in highlight eros elementum tristique.

I
Текст курсивный

Suspendisse varius enim in highlighteros elementum tristique.

Выравнивание текста

Для выравнивания текста по компонентам доступны стили выравнивания текста.

Текст слева

Текст слева: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Текстовый центр

Текстовый центр: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Текст справа

Текст справа: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Блокнот

Стилизация для блочных кавычек.

Это цитата. Lorem комфорт достиг гея возможно камера его шесть отвлечь кроме добавить. Лунный свет газета вверх его наслаждение согласны в зависимости. Своевременная голосовая доля привела его к расширению шумных молодых. На свадьбах верил смеяться хотя материал делает упражнение из. Up attempt offered ye civilly so sitting to. Принятие бесчувственности замечательно является приглашением.
Стили списков

Стилизация для упорядоченных, неупорядоченных и неупорядоченных списков.

  1. Это упорядоченный список
  2. Это элемент списка в упорядоченном списке
  3. Стилизуйте каждый элемент списка по своему усмотрению
  • Это неупорядоченный список
  • Это элемент списка в неупорядоченном списке
  • Стилизуйте каждый элемент списка по своему усмотрению
  • Это нестилизованный список
  • Это элемент списка внутри списка Unstyled
  • Это нестилизованный список, поэтому не нужно его стилизовать
Насыщенный текст

Элемент Rich Text Element (RTE) используется для создания длинного контента. Подробнее о расширенной стилистике вы можете узнать здесь

Это насыщенный текстовый заголовок

Элемент насыщенного текста позволяет создавать и форматировать заголовки, абзацы, цитаты, изображения и видео в одном месте, вместо того чтобы добавлять и форматировать их по отдельности. Просто дважды щелкните мышью и легко создайте контент.

  • Это неупорядоченный список
  • Это элемент списка в неупорядоченном списке
  • Стилизуйте каждый элемент списка по своему усмотрению
Редактирование статического и динамического контента

Элемент насыщенного текста можно использовать как со статическим, так и с динамическим содержимым. Для статического контента просто поместите его на любую страницу и начните редактировать. Для динамического контента добавьте поле с насыщенным текстом в любую коллекцию, а затем подключите элемент с насыщенным текстом к этому полю на панели настроек. Вуаля!

Как настроить форматирование для каждого насыщенного текста

Заголовки, абзацы, цитаты, рисунки, изображения и подписи к рисункам можно стилизовать после добавления класса к элементу насыщенного текста с помощью системы вложенных селекторов "Когда внутри".

Заголовки, абзацы, цитаты, рисунки, изображения и подписи к рисункам можно стилизовать после добавления класса к элементу насыщенного текста с помощью системы вложенных селекторов "Когда внутри".
Форма

Общий стиль для элементов формы.

Вход
Textarea
Радио
Флажок
Выберите
Спасибо! Ваша заявка получена!
Упс! Что-то пошло не так при отправке формы.
Контейнеры

Различные типы ширины контейнеров.

Полный контейнер
Контейнер заполнен
Контейнер
1460px контейнер
Контейнер средний
Средний контейнер 1200px
Контейнер малый
Небольшой контейнер 900px
Внутренний контейнер
Внутренний контейнер 800px
Внутренний контейнер малый
Внутренний контейнер размером 600px
Внутренний контейнер
Слева
800px внутренний контейнер слева
Промежутки между секциями

Чтобы дать секциям больше пространства для дыхания и сохранить одинаковое расстояние между секциями. В ответ на это расстояние будет уменьшено.

Расстояние между секциями
Отступ сверху вниз 150px
Расстояние между секциями Верхняя часть
Отступ сверху 150px
Расстояние между секциями Дно
Отступ снизу 150px
Поля

Для добавления отступов между элементами и поддержания единых значений интервалов на сайте доступны вспомогательные классы margin.

Нижняя граница 0px
Нет маржи
Нижняя граница 4px
Маржа Дно 4
Нижняя граница 8px
Маржа Дно 8
Нижняя граница 12px
Маржа Дно 12
Margin Bottom 16px
Маржа Дно 16
Нижняя граница 20px
Маржа Дно 20
Нижняя граница 24px
Маржа Дно 24
Margin Bottom 28px
Маржа Дно 28
Margin Bottom 32px
Маржа Дно 32
Нижняя граница 36px
Маржа Дно 36
Нижняя граница 40px
Маржа Дно 40
Margin Bottom 44px
Маржа Дно 44
Margin Bottom 48px
Маржа Дно 48
Margin Bottom 54px
Маржа Дно 54
Margin Bottom 60px
Маржа Дно 60
Margin Bottom 70px
Маржа Дно 70
Нижняя граница 80px
Нижняя граница 80