Kpi

Kpi — главное число виджета. stack кладёт подпись капсом над числом, плашку Delta и заметку под ним (CONVERSIONS · 7 DAYS / 1 284 / +8.7%); deltaInline переносит плашку в строку с числом, заметка остаётся под ними — так устроена шапка компактной ячейки ($3 542.18 +12.4% / vs previous 7 days). side ставит число слева, подпись и заметку столбиком справа, плашку — за ними (48 · Participants · 38 active). Число приходит готовым текстом: валюта и разряды — забота продукта.

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

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

Верх компактной ячейки виджета.
Левая колонка развёрнутого виджета.
Число участников или источников с пояснением сбоку.

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

Ряд из нескольких показателей — Stat List columns.
Сумма с валютой в тексте — Amount.

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

stat-list — несколько показателей в ряд
delta — только плашка изменения

Четыре раскладки

stack с плашкой и заметкой, size="m", deltaInline компактной ячейки, side с подписью справа.

Конверсии · 7 дней 1 284 +8.7% к прошлым 7 дням

Показы · 7 дней 2.41M −2.0%

$3 542.18 +12.4% к прошлым 7 дням

48 Участники 38 активных · 10 неактивных +6 за месяц

<!--
  🟢

  Четыре раскладки показателя: подпись над числом с плашкой и заметкой,
  средний кегль, плашка в строке с числом (шапка компактной ячейки), число
  слева с подписью справа (участники программы).
-->

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

<div style="display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start;">
	<Kpi label={t("Conversions · 7 days")} value="1 284" delta="+8.7%" trend="up" note={t("vs previous 7 days")} />
	<Kpi label={t("Impressions · 7 days")} value="2.41M" delta="−2.0%" trend="down" size="m" />
	<Kpi value="$3 542.18" delta="+12.4%" trend="up" deltaInline note={t("vs previous 7 days")} size="m" />
	<Kpi layout="side" value="48" label={t("Participants")} note={t("38 active · 10 idle")} delta={t("+6 this month")} />
</div>