Island

Island — приподнятая над фоном страницы плашка: скругление, кольцо рамки, мягкая тень, внутренний отступ. Она держит группу связанных блоков — теги сводки, сумму баланса с кнопкой и переключателем, поля одной секции формы — и ничего не знает об их смысле. Под содержимым может стоять подвал footer — линия и центрированная полоса во всю ширину поверхности. Остров с заголовком — это Card.

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

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

Блок сводки в боковой колонке без собственного заголовка: теги кампании, владелец, баланс с пополнением.
Секция формы в центральной колонке редактора: поля одной задачи на общей поверхности.
Группе блоков нужна одна поверхность и общий ритм, а не заголовок.

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

Блоку нужен заголовок, подсказка или действие над блоком целиком — это Card.
Один контрол или одна строка текста — поверхность вокруг них лишняя.
Панель поверх экрана — это Dialog или Popover.

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

card — та же поверхность с шапкой-заголовком
popover — панель поверх экрана рядом с якорем, а не блок в потоке

Сводка кампании

Блок campaign-summary кита: теги стоимости, платформы и географии на одном острове.

CPM $2.50

Push

US, CA, UK

Десктоп

<!--
  🟢

  Сводка кампании кита ADMY (`campaign-summary`): теги стоимости, платформы и
  географии на одном острове. Ширину острову даёт колонка; здесь её заменяет
  обёртка 200px, как на макете summary.
-->

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

<div style="width: 200px;">
	<Island label={t("Сводка кампании")}>
		<div style="display: flex; flex-wrap: wrap; gap: var(--sp-1);">
			<Tag size="s" hideWords={false}>CPM $2.50</Tag>
			<Tag size="s" hideWords={false}>Push</Tag>
			<Tag size="s" hideWords={false}>US, CA, UK</Tag>
			<Tag size="s" hideWords={false}>{t("Desktop")}</Tag>
		</div>
	</Island>
</div>

Панель баланса

Блок campaign-balance кита: подпись и сумма с короткой кнопкой пополнения, разделитель, переключатель автопополнения.

Balance: $322.94

Auto top-up

<!--
  🟢

  Панель баланса кита ADMY (`campaign-balance`): подпись и сумма с короткой
  кнопкой пополнения, разделитель и переключатель автопополнения — три блока
  колонкой с зазором острова. Ширину даёт колонка; здесь её заменяет обёртка
  200px, как на макете.
-->

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

let autoTopup = $state(false);
</script>

<div style="width: 200px;">
	<Island label={t("Баланс кампании")}>
		<div style="display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);">
			<span style="display: flex; flex-direction: column; gap: var(--sp-0-5); min-width: 0;">
				<span style="font-size: var(--fs-xs); color: var(--c-text-muted);">Balance:</span>
				<strong style="font-size: var(--fs-m); font-weight: var(--fw-medium); line-height: var(--lh-solid);">$322.94</strong>
			</span>
			<Button variant="accent" short icon="Plus" aria-label={t("Пополнить баланс")} />
		</div>
		<Divider />
		<Switch label="Auto top-up" bind:checked={autoTopup} />
	</Island>
</div>

С подвалом

Список креативов и подвал footer: линия во всю ширину и кнопка «показать ещё» по центру.

Push · 720×480Native · 1200×628In-page · 300×250

<!--
  🟢

  Остров с подвалом: список креативов в теле и полоса `footer` под линией во
  всю ширину поверхности — продолжение списка по центру. Ширину острову даёт
  колонка; здесь её заменяет обёртка 260px.
-->

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

const creatives = ["Push · 720×480", "Native · 1200×628", "In-page · 300×250"];
</script>

<div style="width: 260px;">
	<Island label={t("Креативы кампании")}>
		<div style="display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-s);">
			{#each creatives as creative (creative)}
				<span>{creative}</span>
			{/each}
		</div>
		{#snippet footer()}
			<Button variant="ghost" size="s" icon="CaretDown">{t("Показать ещё")}</Button>
		{/snippet}
	</Island>
</div>

Отступы и зубчатый край

pad s / l / none и tooth — остров-чек с зубчатым низом.

Без отступа — под таблицу во всю ширину

Отступ 20 — карточка с воздухом

Итого к оплате: 12 400 ₽

<!--
  🟢

  Отступы и зубчатый край (эталон: Vue-легаси island size / wide / tooth):
  плотный остров под таблицу без отступа, просторный с отступом 20 и
  остров-чек с зубчатым низом.
-->

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

<div style="display: flex; flex-direction: column; gap: var(--sp-4); width: 360px;">
	<Island pad="none" label={t("Плотный")}>
		<div style="padding: var(--sp-1); font-size: var(--fs-s);">{t("Без отступа — под таблицу во всю ширину")}</div>
	</Island>
	<Island pad="l" label={t("Просторный")}>
		<span style="font-size: var(--fs-s);">{t("Отступ 20 — карточка с воздухом")}</span>
	</Island>
	<Island tooth label={t("Чек")}>
		<span style="font-size: var(--fs-s);">{t("Итого к оплате: 12 400 ₽")}</span>
	</Island>
</div>