Отступ текста (text-indent)link

https://dev.ru.simai.io/ru/ui/utility/typography/text-indent.php

С помощью модификаторов можно задать отступ для первой строки текста.

Таблица классовlink

Класс	Значение
.indent-0	text-indent: var(--sf-0);
.indent-1	text-indent: var(--sf-space-1);
.indent-2	text-indent: var(--sf-space-2);
.indent-3	text-indent: var(--sf-space-3);
.indent-4	text-indent: var(--sf-space-4);
.indent-5	text-indent: var(--sf-space-5);

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

• Контрольная точка (необязательный параметр):
  Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
  Если не указана, модификатор применяется для всех размеров.

• Модификатор (обязательный параметр):

  • indent-0 - отступ отсутствует
  • indent-1, indent-2, indent-3, indent-4, indent-5 - различные размеры отступов, основанные на переменных отступов (--sf-space-*)

Пример использованияlink

<p class="indent-0">Абзац без отступа.</p>
<p class="indent-1">Абзац с небольшим отступом.</p>
<p class="indent-2">Абзац со средним отступом.</p>
<p class="indent-3">Абзац с увеличенным отступом.</p>
<p class="indent-4">Абзац с ещё большим отступом.</p>
<p class="indent-5">Абзац с максимальным отступом.</p>

Переход со старой системыlink

В старой версии использовались другие обозначения. Теперь необходимо произвести замену:

Старое значение	Новое значение
.indent-1, .indent-2, .indent-3, .indent-4	.indent-1
.indent-5	.indent-2
.indent-6, .indent-7	.indent-3
.indent-8	.indent-4
.indent-9	.indent-5

Адаптируйте старые классы в соответствии с новой схемой.

Адаптивностьlink

Для изменения отступа текста, начиная с определенного размера экрана, добавьте префикс контрольной точки (sm:, md:, lg:, xl:):

<p class="md:indent-3">Начиная с размера экрана md, отступ будет средний.</p>