Uma visão geral de tudo o que o sistema de design oferece. Tema: day. Idioma: Português.
Como mostrar datas, números, dinheiro, nomes e moradas, e quais se confundem entre si.
Ponha a data numa etiqueta <time>, com uma versão que um computador consiga ler. A data visível escreva-a como os seus leitores esperam vê-la. O rastrillo não a formata por si.
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>Use <time> também para uma duração. A versão legível por máquina tem um aspeto estranho: PT2H30M significa 2 horas e 30 minutos.
<section rst-box>
<dl rst-detail>
<dt>Build time</dt>
<dd><time datetime="PT2H30M">2h 30m</time></dd>
</dl>
</section>Separe os números longos para que se leiam de relance: 54,173 em inglês, 54.173 em alemão, ٥٤٬١٧٣ em árabe. Nunca mostre um número longo como dígitos soltos. Numa tabela, use dígitos todos da mesma largura, para que as colunas fiquem alinhadas.
<div rst-stats>
<div rst-stat><span rst-stat-label>Members</span><span rst-stat-num>54,173</span></div>
<div rst-stat><span rst-stat-label>Messages</span><span rst-stat-num>1,284,902</span></div>
</div>O rastrillo só sabe escrever dólares dos Estados Unidos. Para qualquer outra coisa, formate o valor você mesmo. Em qualquer dos casos, guarde o dinheiro como um número inteiro de cêntimos, nunca como decimal.
<section rst-box>
<dl rst-detail>
<dt>Payout</dt>
<dd>$1,284.50</dd>
</dl>
</section>Use <meter> para mostrar quão cheio algo está. Use <progress> para mostrar até onde chegou uma tarefa. Escreva sempre o número ao lado da barra. Uma barra sozinha não diz nada a quem não a vê.
<div rst-box-head><h2>Photo storage</h2></div>
<section rst-box>
<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>
</section>
<div rst-box-head><h2>Import</h2></div>
<section rst-box>
<div rst-job><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>
</section>Mostre um tamanho arredondado como 4 MB e ponha o número exato de bytes numa etiqueta <data>. Os leitores de ecrã leem o que está no ecrã e ignoram a etiqueta, por isso o tamanho arredondado tem de servir por si só.
<section rst-box>
<dl rst-detail>
<dt>Export</dt>
<dd><data value="4194304">4 MB</data></dd>
</dl>
</section>Estes não se separam. Encomenda 4471, não encomenda 4,471. Os anos, os números de versão e os de porta são iguais. Use rst-mono para que pareçam códigos, e nunca ponha um numa etiqueta <time>, mesmo quando parece uma data.
<section rst-box>
<dl rst-detail>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
<dt>Order</dt>
<dd class="rst-mono">4471</dd>
</dl>
</section>Um nome pode estar em qualquer língua, incluindo as que se leem da direita para a esquerda. Quando um nome fica no meio de uma linha, envolva-o em <bdi>, ou baralhará as palavras à volta. Use person para mostrar um nome com uma imagem ao lado.
<div rst-card style="--rst-cols: minmax(0, 1fr) 120px">
<div rst-lrow>
<a class="rst-nm" href="/people/1"><bdi>Grace Hopper</bdi><small><bdi>grace@example.com</bdi> · 09:12</small></a>
<span class="rst-cell-mut rst-m-hide">Admin</span>
</div>
</div>A etiqueta <address> não é para moradas postais. É para dizer quem escreveu a página. Uma morada de entrega é texto normal. Uma lista de pessoal é uma lista.
<section rst-box>
<address>Written by <bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
<dl rst-detail>
<dt>Deliver to</dt>
<dd>42 Wharf Road, Dublin 2</dd>
</dl>
</section>A etiqueta <abbr> mostra o texto completo quando passa o rato por cima. Isso não funciona num telemóvel, e os leitores de ecrã saltam-no muitas vezes. Escreva também as palavras por extenso à primeira vez.
<section rst-box>
<p>Every page here meets the Web Content Accessibility Guidelines
(<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>) 2.2 at level AA.</p>
</section>Quando a sua página soma algo, ponha o resultado numa etiqueta <output>. Um total acumulado, um preço convertido, uma contagem decrescente.
<section rst-box>
<form rst-form>
<div rst-field>
<label rst-field-label for="seats">Seats</label>
<input rst-input="short" id="seats" name="seats" type="number" value="12">
</div>
<p>Total <output for="seats" name="total">$144.00</output></p>
</form>
</section>