Space

Space делит страницу на разделы: строка с заголовком раздела и местом для действий справа, под ней — содержимое: острова, карточки, таблица, форма. Заголовок раздела крупнее плашки Title и меньше титула страницы. У раздела нет поверхности — фон, рамку и тень дают блоки внутри.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

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

Страница из нескольких смысловых разделов: «Настройки», «Креативы», «История» — каждому своя строка заголовка.
Над разделом нужно действие ко всему разделу целиком: «Добавить», «Экспорт», переключатель вида.
Список или таблица должны получить имя раздела, не становясь карточкой.

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

Заголовок всей страницы со стрелкой возврата — это Page Header.
Именованный блок на поверхности с рамкой и тенью — это Card.
Заголовок внутри блока над группой контролов — это Title.

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

page-header — титул страницы: стрелка возврата, описание, главные действия
card — именованный блок на поверхности острова
title — плашка заголовка внутри блока

Раздел с содержимым

Строка заголовка раздела и остров под ней.

Креативы

Push · 720×480 Native · 1200×628

<!--
  🟢

  Раздел страницы: строка заголовка «Креативы» и остров с содержимым под
  ней. Ширину разделу даёт страница; здесь её заменяет обёртка 480px.
-->

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

<div style="width: 480px;">
	<Space title={t("Креативы")}>
		<Island label={t("Список креативов")}>
			<span style="font-size: var(--fs-s);">Push · 720×480</span>
			<span style="font-size: var(--fs-s);">Native · 1200×628</span>
		</Island>
	</Space>
</div>

Действия справа

Кнопка ко всему разделу в правом краю строки заголовка.

Правила таргетинга

GEO: US, CA, UK Устройства: Desktop

<!--
  🟢

  Действие ко всему разделу: кнопка «Добавить» в правом краю строки
  заголовка, под ней — содержимое раздела.
-->

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

<div style="width: 480px;">
	<Space title={t("Правила таргетинга")}>
		{#snippet actions()}
			<Button variant="accent" size="s" icon="Plus">{t("Добавить")}</Button>
		{/snippet}
		<Island label={t("Правила")}>
			<span style="font-size: var(--fs-s);">GEO: US, CA, UK</span>
			<span style="font-size: var(--fs-s);">{t("Устройства: Desktop")}</span>
		</Island>
	</Space>
</div>