Обзор всего, что даёт дизайн-система. Тема: plain. Язык: Русский.
Мелкие части словаря, из которых собирается экран: статус, личность, прогресс и единственная форма предупреждения.
Готовые и согласованные между собой элементы интерфейса, отрисованные на сервере.
В словаре самого фреймворка это partials: ui.Templates() возвращает partials, и docs/site/templates.md описывает их под этим именем. Слово на этой странице изменилось, слово в коде — нет.
Ссылки неактивны, исходник примера приложен.
Каждый пример ниже — в своей рамке.
Содержимое примеров на английском. Каркасы примеров переведены.
Статус записи в виде цветной плашки — цвет и подпись.
Тон по умолчанию (neutral)
<span rst-status rst-tone="neutral">Draft</span>neutral
<span rst-status rst-tone="neutral">Draft</span>positive
<span rst-status rst-tone="positive">Published</span>warning
<span rst-status rst-tone="warning">Scheduled</span>negative
<span rst-status rst-tone="negative">Failed</span>Небольшая рамочная метка прописными буквами для статичных пометок. Это не status-pill: тот показывает статус записи.
Без тона (тихое значение по умолчанию)
<span rst-badge>Draft</span>neutral
<span rst-badge="neutral">Internal</span>positive
<span rst-badge="positive">Live</span>warning
<span rst-badge="warning">Beta</span>negative
<span rst-badge="negative">Sold out</span>Полоса заполнения вместе с числом.
Пусто
<span rst-meter><meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>0/500</span></span>Наполовину
<span rst-meter><meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>210/500</span></span>Почти заполнено
<span rst-meter><meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>412/500</span></span>Заполнено
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>500/500</span></span>Сверх лимита
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>700/500</span></span>Заполнение ограничено 100% внутри партиала.
Одно число на панели, с подписью и тем, насколько оно изменилось.
Большое число
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div></div>Добавьте Lead одному показателю в ряду, и он станет крупным. Это тот же компонент, только больше.
Число поменьше
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>Нужны только подпись и число. Всё остальное необязательно.
Когда снижение — это хорошо
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>Цвет задаёте вы, а не компонент. Здесь число снизилось, и это хорошая новость, поэтому изменение зелёное.
Когда рост — это плохо
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">+3</span><span rst-stat-note>vs. last week</span></div></div>Здесь число выросло, и это плохая новость, поэтому изменение красное.
Когда сказать нельзя
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">+18s</span><span rst-stat-note>since Friday</span></div></div>Не задавайте цвет, и изменение будет серым. Так и делайте, когда нельзя сказать, хорошо это или плохо.
Сокращённое число
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>Показываете 4.1k вместо 4120? Полное число положите в Exact. Программы чтения с экрана читают только то, что на экране, поэтому всё, что нужно человеку, держите в самом числе.
Аватар с инициалами, имя и почта. Помогает быстро узнать записи о людях.
Имя и почта
<a rst-person href="/people/1"><span rst-person-av aria-hidden="true">G</span><span rst-person-meta><span rst-person-name>Grace Hopper</span><span rst-person-email>grace@example.com</span></span></a>Крупный — размер для шапки экрана просмотра
<a rst-person="lg" href="/people/2"><span rst-person-av aria-hidden="true">A</span><span rst-person-meta><span rst-person-name>Ada Lovelace</span><span rst-person-email>ada@example.com</span></span></a>Без инициала
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>Единственный словарь предупреждений: цветная полоса, значок тона, необязательный жирный заголовок и один абзац текста.
Тон по умолчанию (info), без заголовка
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>info
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>positive
<div rst-callout rst-tone="positive"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span><div rst-callout-body><strong>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>warning
<div rst-callout rst-tone="warning"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span><div rst-callout-body><strong>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>negative
<div rst-callout rst-tone="negative"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>negative, объявляется как предупреждение
<div rst-callout rst-tone="negative" role="alert"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>alert добавляет role="alert", чтобы показывать важные сообщения.
Список определений о записи на экране подробностей. Моноширинная пометка — для машинных значений.
Четыре факта, один машинный
<section rst-box><dl rst-detail>
<dt>Audience</dt>
<dd>Members</dd>
<dt>Main page</dt>
<dd>No</dd>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>Однострочное подтверждение после перенаправления. Принимает обычную строку, а не dict, и при пустой не выводит ничего.
Сообщение о сохранении
<p rst-notice role="status">Post saved.</p>Строка со сводкой ошибок формы, role="alert". Принимает обычную строку; при отсутствии ошибки не выводит ничего.
Отклонённая отправка
<p rst-form-error role="alert">That title is already taken.</p>Опрашиваемый фрагмент фоновой задачи. Атрибут data-poll выводится, только пока задача выполняется, — не вывести его и значит остановить опрос.
Выполняется
<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
<span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>
Этот опрашивает: единственный образец на странице, который вообще что-то просит у сети, — и на статическом сайте он просто никогда не дождётся ответа.
Готово
<div rst-job>
<strong>Import</strong> finished.
</div>
Не удалось
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>