Классы indent-* задают отступ первой строки абзаца. Берите их в сплошном
тексте — статье, договоре, книге, — где абзацы отделяют отступом, а не
промежутком.
Пример
Подпись над образцом — класс, который на нём стоит.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-0</code>
<pclass="m-0 text-2 indent-0">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-1</code>
<pclass="m-0 text-2 indent-1">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-2</code>
<pclass="m-0 text-2 indent-2">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-3</code>
<pclass="m-0 text-2 indent-3">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-4</code>
<pclass="m-0 text-2 indent-4">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">indent-5</code>
<pclass="m-0 text-2 indent-5">Отступ первой строки отделяет абзацы в сплошном тексте. Остальные строки абзаца начинаются от края блока.</p>
</div>
</div>
Классы
Класс
CSS
Значения
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)
—
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
Переменная
Значение по умолчанию
--sf-0
0
--sf-space-1
var(--sf-b2); от ширины lg: var(--sf-b6)
--sf-space-2
var(--sf-b6); от ширины lg: var(--sf-c0)
--sf-space-3
var(--sf-b6); от ширины lg: var(--sf-c2)
--sf-space-4
var(--sf-c2); от ширины lg: var(--sf-c6)
--sf-space-5
var(--sf-c6); от ширины lg: var(--sf-d0)
Применение
Ступени берутся из шкалы отступов --sf-space-*, той же, что у внешних и
внутренних отступов. indent-0 снимает отступ — например, у первого абзаца
после заголовка.
HTML
<article>
<pclass="indent-0">Первый абзац без отступа.</p>
<pclass="indent-3">Следующий абзац с отступом первой строки.</p>
</article>
Ограничения
indent-2 и indent-3 дают одинаковый отступ: токены --sf-space-2 и
--sf-space-3 равны.
Отступ ставится от начала строки: в документе справа налево — справа.
У семейства нет префиксов ширины экрана и состояний.
