Заголовки

Вы можете изменить оформление заголовков с помощью специальных модификаторов.

Выделение заголовков

Для того чтобы заголовки имели особое оформление, необходимо использовать для них дополнительный класс .sf-title.

h1. Заголовок 1-го уровня

h2. Заголовок 2-го уровня

h3. Заголовок 3-го уровня

h4. Заголовок 4-го уровня

h5. Заголовок 5-го уровня
h6. Заголовок 6-го уровня
<h1 class="sf-title">h1. Заголовок 1-го уровня</h1>
<h2 class="sf-title">h2. Заголовок 2-го уровня</h2>
<h3 class="sf-title">h3. Заголовок 3-го уровня</h3>
<h4 class="sf-title">h4. Заголовок 4-го уровня</h4>
<h5 class="sf-title">h5. Заголовок 5-го уровня</h5>
<h6 class="sf-title">h6. Заголовок 6-го уровня</h6>

Оформление заголовков

Используйте дополнительные классы для оформления заголовков:

  • .sf-title-underline-center - заголовк по центру, нижнее подчеркивание одинарной линией, цветом primary
  • .sf-title-underline-centercenter-double- заголовок по центру, нижнее подчеркивание двойной линией цветом primary
  • .sf-title-underline-left - заголовок по левому краю, нижнее подчеркивание одинарной линией цветом primary
  • .sf-title-underline-line - бледная линиия по центру текста

Вы можете применять данные классы как непосредственно для элемента, так и для вышестоящего элемента. В этом случае стиль применяется только к элементам с классом .sf-title.

h1. Заголовок 1-го уровня

h1. Заголовок 1-го уровня

<h1 class="sf-title sf-title-underline-center">h1. Заголовок 1-го уровня</h1>
<div class="sf-title-underline-center"><h1 class="sf-title">h1. Заголовок 1-го уровня</h1></div>

Оформление нижним подчеркиванием.

Используйте класс .sf-title-underline-center для подчеркивания заголовков линией цвета primary с размещением заголовка по центру

h1. Заголовок 1-го уровня

h2. Заголовок 2-го уровня

h3. Заголовок 3-го уровня

h4. Заголовок 4-го уровня

h5. Заголовок 5-го уровня
h6. Заголовок 6-го уровня
<h1 class="sf-title sf-title-center-underline">h1. Заголовок 1-го уровня</h1>
<h2 class="sf-title sf-title-center-underline">h2. Заголовок 2-го уровня</h2>
<h3 class="sf-title sf-title-center-underline">h3. Заголовок 3-го уровня</h3>
<h4 class="sf-title sf-title-center-underline">h4. Заголовок 4-го уровня</h4>
<h5 class="sf-title sf-title-center-underline">h5. Заголовок 5-го уровня</h5>
<h6 class="sf-title sf-title-center-underline">h6. Заголовок 6-го уровня</h6>

Оформление двойным нижним подчеркиванием

Используйте класс .sf-title-underline-center для двойного подчеркивания заголовков линией цвета primary с размещением заголовка по центру

h1. Заголовок 1-го уровня

h2. Заголовок 2-го уровня

h3. Заголовок 3-го уровня

h4. Заголовок 4-го уровня

h5. Заголовок 5-го уровня
h6. Заголовок 6-го уровня
<h1 class="sf-title sf-title-center-underline-double">h1. Заголовок 1-го уровня</h1>
<h2 class="sf-title sf-title-center-underline-double">h2. Заголовок 2-го уровня</h2>
<h3 class="sf-title sf-title-center-underline-double">h3. Заголовок 3-го уровня</h3>
<h4 class="sf-title sf-title-center-underline-double">h4. Заголовок 4-го уровня</h4>
<h5 class="sf-title sf-title-center-underline-double">h5. Заголовок 5-го уровня</h5>
<h6 class="sf-title sf-title-center-underline-double">h6. Заголовок 6-го уровня</h6>

Оформление левым подчеркиванием

Используйте класс .sf-title-underline-left для левого подчеркивания заголовков линией цвета primary с размещением заголовка по левому краю

h1. Заголовок 1-го уровня

h2. Заголовок 2-го уровня

h3. Заголовок 3-го уровня

h4. Заголовок 4-го уровня

h5. Заголовок 5-го уровня
h6. Заголовок 6-го уровня
<h1 class="sf-title sf-title-center-underline-left">h1. Заголовок 1-го уровня</h1>
<h2 class="sf-title sf-title-center-underline-left">h2. Заголовок 2-го уровня</h2>
<h3 class="sf-title sf-title-center-underline-left">h3. Заголовок 3-го уровня</h3>
<h4 class="sf-title sf-title-center-underline-left">h4. Заголовок 4-го уровня</h4>
<h5 class="sf-title sf-title-center-underline-left">h5. Заголовок 5-го уровня</h5>
<h6 class="sf-title sf-title-center-underline-left">h6. Заголовок 6-го уровня</h6>

Оформление левым подчеркиванием

Используйте класс .sf-title-line для размещения загловка на линии

h1. Заголовок 1-го уровня

h2. Заголовок 2-го уровня

h3. Заголовок 3-го уровня

h4. Заголовок 4-го уровня

h5. Заголовок 5-го уровня
h6. Заголовок 6-го уровня
<h1 class="sf-title sf-title-line">h1. Заголовок 1-го уровня</h1>
<h2 class="sf-title sf-title-line">h2. Заголовок 2-го уровня</h2>
<h3 class="sf-title sf-title-line">h3. Заголовок 3-го уровня</h3>
<h4 class="sf-title sf-title-line">h4. Заголовок 4-го уровня</h4>
<h5 class="sf-title sf-title-line">h5. Заголовок 5-го уровня</h5>
<h6 class="sf-title sf-title-line">h6. Заголовок 6-го уровня</h6>