设计系统所提供内容的总览。主题：plain。语言：简体中文。
拼出一个页面的那些小块语汇：状态、身份、进度，以及唯一的那种提示形状。
预先做好、彼此一致的界面元素，在服务器端渲染。
框架自己的词汇把它们叫作 partial：ui.Templates() 返回的是 partial，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>填充在 partial 里被限制在 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>