Компонент Заголовок
Устанавливайте различные стили для своих заголовков. Модификаторы. Заголовок с разделителем. Разметка. Примеры.
Модификаторы «Размер»
Добавьте один из следующих классов, чтобы изменить размер и стиль заголовков.
Обычно эти классы используются для элементов заголовка <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>
<h4 class="uk-heading-line uk-heading-small uk-text-center"><span>Название</span></h4>
<h5 class="uk-heading-line uk-h2 uk-text-right"><span>Заголовок с линией</span></h5>