Компонент Заголовок Heading

Устанавливайте различные стили для своих заголовков. Модификаторы. Заголовок с разделителем. Разметка. Примеры.

Модификаторы «Размер»

Добавьте один из следующих классов, чтобы изменить размер и стиль заголовков. Обычно эти классы используются для элементов заголовка <h1>, ... , <h6>, но они работают также с любым другим элементом, таким как элемент div. Обратите внимание, что эти классы расширяют (дополняют) классы заголовков из компонента базовых элементов.

Класс Описание
.uk-heading-small Добавьте этот класс, чтобы применить заголовок небольшого размера.
.uk-heading-medium Добавьте этот класс, чтобы применить заголовок среднего размера.
.uk-heading-large Добавьте этот класс, чтобы установить заголовок размера large.
.uk-heading-xlarge Добавьте этот класс, чтобы установить заголовок размера xlarge.
.uk-heading-2xlarge Добавьте этот класс, чтобы установить заголовок размером 2xlarge.
.uk-heading-3xlarge Добавьте этот класс, чтобы установить заголовок размером 3xlarge.
<h1 class="uk-heading-medium"></h1>

Примеры

  • Small

    Medium

    Large

    X-Large

    2X-Large

    3X-Large

  • <h3 class="uk-heading-small">Small</h3>
    <h3 class="uk-heading-medium">Medium</h3>
    <h3 class="uk-heading-large">Large</h3>
    <h3 class="uk-heading-xlarge">X-Large</h3>
    <h3 class="uk-heading-2xlarge">2X-Large</h3>
    <h3 class="uk-heading-3xlarge">3X-Large</h3>

Модификатор «Разделитель»

Чтобы применить разделитель к заголовку, добавьте класс .uk-heading-divider. Вы можете комбинировать его с любым модификатором Размер.

<h1 class="uk-heading-divider"></h1>
  • Заголовок с разделителем

  • <h3 class="uk-heading-divider">Заголовок с разделителем</h3>

Модификатор «Bullet»

Чтобы применить стиль bullet к заголовку, добавьте класс .uk-heading-bullet. Вы можете комбинировать его с любым модификатором Размер. Данный модификатор хорошо работает с выравниванием текста.

<h1 class="uk-heading-bullet"></h1>

Примеры

  • Заголовок Bullet

  • <h3 class="uk-heading-bullet">Заголовок Bullet</h3>
  • Bullet справа

  • <h4 class="uk-heading-bullet uk-heading-small uk-text-right">Bullet справа</h4>

Модификатор «Линия»

Чтобы добавить вертикально центрированную линию к текстовому заголовку, добавьте класс .uk-heading-line и поместите внутри элемента заголовка элемент <span>. Вы можете комбинировать его с любым модификатором размера, и он хорошо работает с выравниванием текста.

<h1 class="uk-heading-line"><span></span></h1>
  • Заголовок с линией

    Название
    Заголовок с линией
  • <h3 class="uk-heading-line uk-h1"><span>Заголовок с линией</span></h3>
    <h5 class="uk-heading-line uk-heading-small uk-text-center"><span>Название</span></h5>
    <h6 class="uk-heading-line uk-h2 uk-text-right"><span>Заголовок с линией</span></h6>