Title

Title называет блок или секцию внутри блока. variant="title" — плашка шапки карточки с подложкой и линией снизу, variant="subtitle" — строка без подложки для секции внутри блока. Справа встают подсказка (hint) и слот действия (trailing) — пин или переключатель; обе формы держат высоту 32px.

Статус: experimental · в системе с 2026-08 · интерактивность: conditional (по конфигурации)

Когда использовать

Шапка карточки или панели формы: «Creatives:», «Filter» — плашка title над телом блока.
Заголовок секции внутри блока: «Desktop», «Mobile» над своей группой контролов — строка subtitle.
Заголовок с пояснением: подсказка hint раскрывает Tooltip у значка «?» справа от текста.
Закрепляемая панель: пин или иное действие блока в слоте trailing у правого края плашки.

Не использовать:

Заголовок страницы: это шапка страницы паттерна, а не плашка блока.
Подпись поля или группы контролов — это Label: она меньше и живёт у самого контрола.
Кнопки действий блока в шапке: слот trailing держит один пин или переключатель, ряд кнопок стоит в теле или подвале блока.

Альтернативы:

label — подпись поля, группы или значения, а не заголовок блока
tooltip — подсказка нужна к произвольному элементу, а не к заголовку

Плашка и секция

Плашка блока над телом карточки и строка секции внутри него.

Creatives

Десктоп

Banner, native and video formats.

Mobile

Interstitial and rewarded formats.

<!--
  🟢

  Две ступени иерархии: плашка `title` в шапке карточки и строка `subtitle`
  над секцией внутри тела. Плашка скруглена только сверху и продолжается
  телом блока без шва.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Title from "$lib/ui/Title.svelte";
</script>

<div style="max-width: 340px;">
	<Title>Creatives</Title>
	<div style="padding: var(--sp-2); border: var(--bw-1) solid var(--c-border); border-top: none;">
		<Title variant="subtitle">{t("Desktop")}</Title>
		<p style="margin: var(--sp-1) var(--sp-0) var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-s);">
			Banner, native and video formats.
		</p>
		<Title variant="subtitle">Mobile</Title>
		<p style="margin: var(--sp-1) var(--sp-0) var(--sp-0); color: var(--c-text-muted); font-size: var(--fs-s);">
			Interstitial and rewarded formats.
		</p>
	</div>
</div>

С подсказкой

Значок «?» справа от текста раскрывает Tooltip у обеих форм.

Filter

Десктоп

<!--
  🟢

  Подсказка справа от текста у обеих форм: значок «?» раскрывает Tooltip.
  Тот же Hint, что у полей.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Title from "$lib/ui/Title.svelte";
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-3); max-width: 340px;">
	<Title hint="Only active creatives are shown here.">Filter</Title>
	<Title variant="subtitle" hint="Sizes are matched to the placement.">{t("Desktop")}</Title>
</div>

Со слотом действия

Пин закрепления панели в слоте trailing у правого края плашки.

Filter

<!--
  🟢

  Слот действия у правого края плашки: пин закрепления панели. Значок стоит в
  вертикальных отступах плашки и не растит её высоту 32px.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Icon from "$lib/ui/Icon.svelte";
import Title from "$lib/ui/Title.svelte";
</script>

<div style="max-width: 340px;">
	<Title>
		Filter
		{#snippet trailing()}
			<Icon name="PushPin" label={t("Закрепить панель")} />
		{/snippet}
	</Title>
</div>