Заголовки

Компонент Align Uikit 3

Применяйте различные стили для заголовков.

Основной заголовок

Чтобы задать заголовку с альтернативный стиль, например, больший размер шрифта или другой цвет, добавьте класс .uk-heading-primary. Логично использовать этот класс для элемента <h1>.

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

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

Добавьте один из следующих классов, чтобы изменить размер и стиль заголовков. Логично использовать их для элементов h1-h6, а также также с любыми другими элементами, таким как элемент div. Обратите внимание, что эти классы расширяют классы заголовков от компонента База UIkit 3 вверх, а наименьший модификатор выбирает размер после элемента h1.

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

  • Small

    Medium

    Large

    XLarge

    2XLarge

  • <h1 class="uk-heading-small">Small</h1>
    <h1 class="uk-heading-medium">Medium</h1>
    <h1 class="uk-heading-large">Large</h1>
    <h1 class="uk-heading-xlarge">XLarge</h1>
    <h1 class="uk-heading-2xlarge">2XLarge</h1>

  • Основной заголовок

  • <h1 class="uk-heading-primary">Основной заголовок</h1>

Заголовок Hero

Вы можете дополнительно увеличить или выделить заголовок, например, при использовании его внутри раздела Hero. Просто добавьте класс .uk-heading-hero.

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

  • Заголовок Hero

  • <h1 class="uk-heading-hero">Заголовок Hero</h1>

Разделитель заголовка

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

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

  • Заголовок с разделителем

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

Буллеты заголовков

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

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

  • Заголовок с буллетом

  • <h1 class="uk-heading-bullet">Заголовок с буллетом</h1>

Линия заголовка

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

<h1 class="uk-heading-line"><span></span></h1>

  • Линия заголовка

    Линия заголовка

    Линия заголовка

  • <h1 class="uk-heading-line"><span>Линия заголовка</span></h1>

<h1 class="uk-heading-line uk-text-center"><span>Линия заголовка</span></h1>

<h1 class="uk-heading-line uk-text-right"><span>Линия заголовка</span></h1>