Un resumen de todo lo que ofrece el sistema de diseño. Tema: day. Idioma: Español.
Las piezas pequeñas de vocabulario con las que se arma una pantalla: estado, identidad, progreso y la única forma de aviso.
Elementos de interfaz ya hechos y coherentes entre sí, renderizados en el servidor.
El vocabulario del propio framework los llama partials: ui.Templates() devuelve partials, y docs/site/templates.md los documenta con ese nombre. La palabra de esta página cambió; la del código, no.
Enlaces inactivos; se facilita el código del ejemplo.
Cada ejemplo de abajo va en su propio marco.
El contenido de ejemplo está en inglés. Los armazones de ejemplo sí están traducidos.
El estado de un registro como una píldora con color y etiqueta.
Tono por defecto (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>Una etiqueta con borde en mayúsculas, para marcas pequeñas y fijas. Distinta de status-pill, que es el estado de un registro.
Sin tono (el valor por defecto 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>Una barra de capacidad con su número.
Vacío
<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 medias
<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>Casi lleno
<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>Lleno
<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>Por encima del límite
<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>El relleno se limita al 100% en el parcial.
Un número en un panel, con una etiqueta y cuánto ha cambiado.
El 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>Añade Lead a una cifra de la fila para hacerla grande. Es el mismo componente, solo que más grande.
Un número más pequeño
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>Solo necesitas una etiqueta y un número. Todo lo demás es opcional.
Cuando bajar es bueno
<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>El color lo decides tú, no el componente. Aquí el número ha bajado y eso es buena noticia, así que el cambio va en verde.
Cuando subir es malo
<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>Aquí el número ha subido y eso es mala noticia, así que el cambio va en rojo.
Cuando no puedes decirlo
<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>Omite el color y el cambio se muestra en gris. Hazlo cuando no puedas decir si es bueno o malo.
Un número acortado
<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>¿Muestras 4.1k en lugar de 4120? Pon el número completo en Exact. Los lectores de pantalla solo leen lo que está en pantalla, así que deja en el propio número todo lo que una persona necesite.
Avatar con iniciales, nombre y correo. Sirve para identificar rápido los registros de personas.
Nombre y correo
<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, el tamaño de la cabecera de detalle
<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>Sin 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>El único vocabulario de avisos: franja con color, icono de tono, título en negrita opcional y un párrafo de cuerpo.
Tono por defecto (info), sin 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 añade role="alert" para mostrar mensajes importantes.
Lista de definiciones sobre un registro en una pantalla de detalle. La marca mono es para valores de aspecto técnico.
Cuatro datos, uno de aspecto 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>Una confirmación de una línea después de una redirección. Recibe una cadena simple, no un dict, y no dibuja nada si está vacía.
Un mensaje de guardado
<p rst-notice role="status">Post saved.</p>La línea de resumen de errores de un formulario, role="alert". Recibe una cadena simple; no dibuja nada cuando no hay error.
Un envío rechazado
<p rst-form-error role="alert">That title is already taken.</p>El fragmento consultado de una tarea en segundo plano. El atributo data-poll solo se emite mientras la tarea se ejecuta: omitirlo es la forma de detener el sondeo.
En marcha
<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 hace sondeo: es la única muestra de la página que le pide algo a la red y, en un sitio estático, sencillamente nunca se resuelve.
Terminado
<div rst-job>
<strong>Import</strong> finished.
</div>
Ha fallado
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>