Bloques de texto

Una cita extensa, separada en su propio bloque. Pon la URL de la fuente en el atributo cite e indica quién lo dijo fuera de la cita, por ejemplo, en un figcaption.

<blockquote>
  <p>The best interface is the one the browser already ships.</p>
</blockquote>

Con estilos de elements/text.css, sin clase.

El valor o la explicación que sigue a dt en una lista de descripciones. Un término puede tener varios.

<dl>
  <dt>Token</dt>
  <dd>A named design decision, stored as a variable.</dd>
</dl>

Con estilos de elements/text.css, sin clase.

Una caja sencilla sin significado propio. Úsala solo si no encaja ningún otro elemento y asígnale una clase que explique su propósito.

<div class="o-stack">
  <div>First block</div>
  <div>Second block</div>
</div>

LUZ no añade estilos: se mantiene el aspecto del navegador. LUZ no añade estilos. El objeto de maquetación o-stack separa sus elementos hijos.

Una lista de nombres asociados a valores: un glosario, las especificaciones de un producto o los datos de un archivo. Cada dt nombra algo y el dd siguiente lo explica.

<dl>
  <dt>Tokens</dt>
  <dd>Layer 1, standalone.</dd>
  <dt>Core</dt>
  <dd>Layer 2, requires tokens.</dd>
</dl>

Con estilos de elements/text.css, sin clase.

La parte del nombre de un par nombre-valor en una lista de descripciones, como una palabra de un glosario. LUZ la muestra con un peso mayor.

<dl>
  <dt>Catalog</dt>
  <dd>Layer 3, catalog patterns.</dd>
</dl>

Con estilos de elements/text.css, sin clase.

El pie de una figura. Colócalo como primer o último elemento hijo de figure.

<figure>
  <img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">
  <figcaption>Two shapes, drawn in SVG.</figcaption>
</figure>

Con estilos de elements/text.css, sin clase.

Envuelve una imagen, un diagrama, un bloque de código o una cita a la que hace referencia el texto, con un pie opcional. Se podría mover a otro lugar de la página sin romper el texto.

<figure>
  <img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">
  <figcaption>Two shapes, drawn in SVG.</figcaption>
</figure>

Con estilos de elements/text.css, sin clase. LUZ convierte una figure sin clase en una superficie con relleno. El componente .luz-figure añade más estilos.

Marca un cambio de tema o de escena entre párrafos. Úsala con ese significado, no como línea decorativa: para una línea sencilla, usa un borde.

<p>Above the break.</p>
<hr>
<p>Below the break.</p>

Con estilos de elements/text.css, sin clase.

Un elemento de una lista. Su padre es ol, ul o menu.

<ul>
  <li>Tokens</li>
  <li>Core</li>
  <li>Catalog</li>
</ul>

Con estilos de elements/text.css, sin clase: los elementos de una lista están separados un paso.

Una lista de acciones que se pueden realizar, como los botones de una barra de herramientas. Los navegadores la tratan como ul; LUZ la distribuye en una fila.

<menu>
  <li><button class="luz-btn luz-btn--outline luz-btn--sm" type="button">Cut</button></li>
  <li><button class="luz-btn luz-btn--outline luz-btn--sm" type="button">Copy</button></li>
  <li><button class="luz-btn luz-btn--outline luz-btn--sm" type="button">Paste</button></li>
</menu>

Con estilos de elements/text.css, sin clase.

Una lista cuyo orden importa, como una serie de pasos o una clasificación. Una lista sin clase recupera los marcadores dentro de su caja.

<ol>
  <li>Install the tokens.</li>
  <li>Add the core.</li>
  <li>Add the catalog package.</li>
</ol>

Con estilos de elements/text.css, sin clase.

Un párrafo de texto. LUZ pide al navegador que evite dejar una sola palabra aislada en la última línea.

<p>LUZ is a vanilla design system: tokens, components and app patterns in plain CSS and ES modules, with no framework and no build step.</p>

Con estilos de elements/text.css, sin clase.

Texto que se muestra exactamente como se ha escrito, con todos los espacios y saltos de línea, en una fuente de ancho fijo. Para el código, añade la clase .luz-code-block y un elemento code.

$ pnpm add @luz-ds/tokens
            $ pnpm add @luz-ds/core

<pre>$ pnpm add @luz-ds/tokens
$ pnpm add @luz-ds/core</pre>

Con estilos de elements/text.css, sin clase.

Una lista cuyo orden no importa, como una lista de características o ingredientes. Una lista sin clase recupera los marcadores dentro de su caja.

<ul>
  <li>Tokens</li>
  <li>Core</li>
  <li>Catalog</li>
</ul>

Con estilos de elements/text.css, sin clase.