Card

Card — поверхность Island с шапкой: полоса с лёгким вертикальным градиентом, линией снизу и заголовком, справа — значок подсказки (hint) и действия карточки (actions). Тело держит любую композицию канона с собственными отступами, под ним — необязательный подвал footer. Без заголовка карточка не нужна — это Island.

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

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

Именованный блок сводки в боковой колонке: «Creatives», «Comment», «Balance» с суммой и кнопкой пополнения.
Секция формы с собственным именем в центральной колонке редактора: «GEO filter» с полями внутри.
Блоку нужен значок подсказки к его смыслу или действие над блоком целиком — закрепить, свернуть.

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

Блоку не нужен заголовок — это Island с той же поверхностью и без шапки.
Панель поверх экрана с фокусом и закрытием — это Dialog или Popover, а не карточка в потоке.
Сворачиваемые разделы одного уровня — это Accordion.

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

island — та же поверхность без шапки — когда заголовок блока не нужен
accordion — разделы, которые сворачиваются под заголовком
dialog — панель поверх экрана, а не блок в потоке

Карточка баланса

Компонент card-balance кита: заголовок «Balance», сумма и короткая кнопка accent пополнения в теле.

Balance

$44444.44

<!--
  🟢

  Карточка баланса кита ADMY (`card-balance`): шапка «Balance», в теле — сумма
  20px bold и короткая кнопка `accent` пополнения справа. Ширину карточке даёт
  колонка; здесь её заменяет обёртка 260px, как на макете.
-->

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

<div style="width: 260px;">
	<Card title="Balance">
		<div style="display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);">
			<strong style="font-size: 20px; line-height: var(--lh-solid);">$44444.44</strong>
			<Button variant="accent" size="s" short icon="Plus" aria-label={t("Пополнить баланс")} />
		</div>
	</Card>
</div>

Подсказка и действие в шапке

Значок hint открывает Tooltip, справа — Toggle Button закрепления; тело — комментарий.

Comment

Some comment text

<!--
  🟢

  Шапка карточки целиком: заголовок, значок подсказки (вариант hint из кита) и
  действие закрепления (flipper-pin макета — по канону Toggle Button со значком
  PushPin). Тело — строка комментария, как в блоке «Comment» боковой колонки.
-->

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

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

<div style="width: 260px;">
	<Card title="Comment" hint={t("Внутренний комментарий: виден только администраторам")}>
		{#snippet actions()}
			<ToggleButton size="s" short icon="PushPin" bind:pressed={pinned} aria-label={t("Закрепить карточку")} />
		{/snippet}
		<span style="color: var(--c-text-muted); font-size: var(--fs-s);">Some comment text</span>
	</Card>
</div>

С подвалом

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

Creatives

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

<!--
  🟢

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

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

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

<div style="width: 260px;">
	<Card title="Creatives">
		<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}
	</Card>
</div>