Uma visão geral de tudo o que o sistema de design oferece. Tema: plain. Idioma: Português.
As peças pequenas de vocabulário com que se monta um ecrã: estado, identidade, progresso e a única forma de aviso.
Elementos de interface já feitos e coerentes entre si, renderizados no servidor.
O vocabulário do próprio framework chama-lhes partials: ui.Templates() devolve partials e docs/site/templates.md documenta-os com esse nome. A palavra desta página mudou; a do código não.
Ligações inativas; o código do exemplo é fornecido.
Cada exemplo abaixo fica na sua própria moldura.
O conteúdo de exemplo está em inglês. Os invólucros de exemplo estão traduzidos.
O estado de um registo como uma etiqueta colorida, com cor e texto.
Tom por omissão (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>Uma etiqueta com contorno em maiúsculas, para marcas pequenas e fixas. Diferente do status-pill, que é o estado de um registo.
Sem tom (o valor predefinido discreto)
<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>Uma barra de capacidade com o seu número.
Vazio
<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>A meio
<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>Quase cheio
<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>Cheio
<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>Acima do limite
<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>O preenchimento é limitado a 100% no parcial.
Um número num painel, com uma etiqueta e quanto mudou.
O número grande
<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>Acrescente Lead a um número da linha para o tornar grande. É o mesmo componente, apenas maior.
Um número mais pequeno
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>Só precisa de uma etiqueta e um número. Tudo o resto é opcional.
Quando descer é bom
<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>A cor decide-a você, não o componente. Aqui o número desceu e isso é boa notícia, por isso a variação está a verde.
Quando subir é mau
<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>Aqui o número subiu e isso é má notícia, por isso a variação está a vermelho.
Quando não se pode dizer
<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>Deixe a cor de fora e a variação fica cinzenta. Faça isso quando não puder dizer se é boa ou má.
Um número encurtado
<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>Está a mostrar 4.1k em vez de 4120? Ponha o número completo em Exact. Os leitores de ecrã só leem o que está no ecrã, por isso mantenha no próprio número tudo o que uma pessoa precise.
Avatar com iniciais, nome e email. Serve para identificar depressa os registos de pessoas.
Nome e e-mail
<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>Grande, o tamanho do cabeçalho de detalhe
<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>Sem inicial
<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>O único vocabulário de avisos: faixa com cor, ícone de tom, título a negrito opcional e um parágrafo de corpo.
Tom por omissão (info), sem título
<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, anunciado como alerta
<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 acrescenta role="alert" para mostrar mensagens importantes.
Lista de definições sobre um registo num ecrã de detalhe. A marca mono é para valores de aspeto técnico.
Quatro dados, um de aspeto técnico
<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>Uma confirmação de uma linha depois de um redirecionamento. Recebe uma cadeia simples, não um dict, e não desenha nada se estiver vazia.
Uma mensagem de guardado
<p rst-notice role="status">Post saved.</p>A linha de resumo de erros de um formulário, role="alert". Recebe uma cadeia simples; não desenha nada quando não há erro.
Um envio recusado
<p rst-form-error role="alert">That title is already taken.</p>O fragmento consultado de uma tarefa em segundo plano. O atributo data-poll só é emitido enquanto a tarefa corre — omiti-lo é a forma de parar a consulta.
A decorrer
<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>
Este faz consultas: é a única amostra da página que pede alguma coisa à rede e, num site estático, nunca chega a resolver-se.
Terminado
<div rst-job>
<strong>Import</strong> finished.
</div>
Falhou
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>