Заголовки

headers

SIMAI Framework поддерживает заголовки H1-H6 HTML. Для установки размеров и высоты строки заголовков используются переменные размера текста.

Теги

Тег Значение
h6 font-size: var(--sf-text--size-1);
lign-height: var(--sf-text--height-1);
h5 font-size: var(--sf-text--size-2);
lign-height: var(--sf-text--height-2);
h4 font-size: var(--sf-text--size-3);
lign-height: var(--sf-text--height-3);
h3 font-size: var(--sf-text--size-4);
lign-height: var(--sf-text--height-4);
h2 font-size: var(--sf-text--size-5);
lign-height: var(--sf-text--height-5);
h1 font-size: var(--sf-text--size-6);
lign-height: var(--sf-text--height-6);

Пример

h6
Заголовок 6
h5
Заголовок 5
h4

Заголовок 4

h3

Заголовок 3

h2

Заголовок 2

h1

Заголовок 1

<h6>Заголовок 6</h6>
<h5>Заголовок 5</h6>
<h4>Заголовок 4</h6>
<h3>Заголовок 3</h6>
<h2>Заголовок 2</h6>
<h1>Заголовок 1</h6>

Переменные

Вы можете изменять отображение заголовков с помощью переменных:

Переменная Значение
--sf-heading--font-weight bold
--sf-heading--font-style normal
--sf-heading--font-family inherit

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

По умолчанию установлены следующие параметры стилей:

Стиль Значение
margin-block-start var(--sf-text--size-5);
font-weight var(--sf-heading--font-weight);
font-family var(--sf-heading--font-family);
font-style var(--sf-heading--font-style);
margin-block-end var(--sf-text--size-2);

Изменить статью