デザインシステムが提供するものの概要。テーマ: plain。言語: 日本語。
画面を組み立てる小さな語彙です。状態、人物、進捗、そしてただひとつのお知らせの形。
あらかじめ作られ、互いに揃った UI 部品を、サーバー側で描画。
フレームワーク自身の語彙では、これらは 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>4120 ではなく 4.1k と表示していますか。完全な数値は 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" を付けて、重要なメッセージを伝えます。
詳細画面でレコードを説明する定義リスト。機械寄りの値には等幅の印を付けます。
4つの項目、うち1つは機械寄り
<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>