Thumbnail

Thumbnail показывает изображение креатива, оффера или формата в рамке нужного размера и пропорции. Без src остаётся плейсхолдер; скрытое превью обозначает значок EyeSlash.

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

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

Место под миниатюру медиа в строке или таблице выдачи: превью креатива, обложка.
Иллюстрация варианта в карточке выбора: формат объявления, тип шаблона.
Предпросмотр макета в колонке редактора: fluid занимает ширину контейнера.
Скрытое или недоступное превью: рамка со значком EyeSlash вместо картинки.

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

Идентификатор пользователя — это Avatar с генеративным персонажем по id.
Значок состояния без рамки-превью — это Icon.
Нужно раскрывать изображение из строки таблицы — используй Popover Preview.

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

avatar — идентификатор пользователя, а не картинка продукта
icon — значок состояния без рамки превью

Размеры

Три ступени шкалы --thumbnail-size-* на квадратной рамке.

s m l

<!--
  🟢

  Три ступени шкалы --thumbnail-size-* на квадратной рамке: s 32, m 48,
  l 96. Размер задаёт токен, поэтому ступени одинаковы во всех скинах.
-->

<script>
import Thumbnail from "$lib/ui/Thumbnail.svelte";

const sizes = ["s", "m", "l"];
</script>

<div style="display: flex; align-items: flex-end; gap: var(--sp-4); font-size: var(--fs-xs);">
	{#each sizes as size (size)}
		<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1);">
			<Thumbnail {size} />
			<code>{size}</code>
		</span>
	{/each}
</div>

Превью и скрытое

Широкая иллюстрация формата и миниатюра скрытого превью со значком EyeSlash.

ratio=wide icon=EyeSlash

<!--
  🟢

  Два места, где встречается превью: широкая иллюстрация формата с подписью
  (label — доступное имя) и квадратная миниатюра скрытого превью со значком
  EyeSlash из словаря канона.
-->

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

<div style="display: flex; align-items: flex-end; gap: var(--sp-6); font-size: var(--fs-xs);">
	<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1);">
		<Thumbnail size="l" ratio="wide" label={t("Формат PUSH")} />
		<code>ratio=wide</code>
	</span>
	<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1);">
		<Thumbnail size="l" icon="EyeSlash" label={t("Превью скрыто")} />
		<code>icon=EyeSlash</code>
	</span>
</div>

По ширине колонки

Вертикальный макет заполняет выделенную ему колонку.

<!--
/**
 * 🟢
 *
 * Превью заполняет колонку и сохраняет вертикальные пропорции.
 * Шириной колонки управляет раскладка страницы, а не компонент изображения.
 */
-->
<script>
import Thumbnail from "$lib/ui/Thumbnail.svelte";
</script>

<div class="preview-column">
	<Thumbnail fluid ratio="portrait" />
</div>

<style>
	.preview-column { width: var(--size-full); max-width: calc(var(--sp-4) * 8); }
</style>