Text blocks

A longer quotation, set apart as its own block. Put the source URL in the cite attribute, and say who said it outside the quote, for example in a figcaption.

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

Styled by elements/text.css, with no class.

The value or explanation that follows a dt in a description list. One term can have several.

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

Styled by elements/text.css, with no class.

A plain box that adds no meaning. Use it only when no other element fits, and give it a class that says what it is for.

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

LUZ adds no style: the browser look is kept. LUZ adds no style. The o-stack layout object spaces the children.

A list of names paired with values: a glossary, product specs, the details of a file. Each dt names something and the dd after it explains it.

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

Styled by elements/text.css, with no class.

The name half of a name and value pair in a description list, such as a word in a glossary. LUZ sets it in a heavier weight.

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

Styled by elements/text.css, with no class.

The caption of a figure. Make it the first or the last child of the 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>

Styled by elements/text.css, with no class.

Wraps an image, a diagram, a code listing or a quote that the text refers to, with an optional caption. It could move elsewhere on the page without breaking the text.

<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>

Styled by elements/text.css, with no class. LUZ makes a bare figure a padded surface. The .luz-figure component adds more.

Marks a change of topic or scene between paragraphs. Use it for that meaning, not as a decorative line: for a plain line, use a border.

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

Styled by elements/text.css, with no class.

One item of a list. Its parent is an ol, a ul or a menu.

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

Styled by elements/text.css, with no class: the items of a list sit one step apart.

A list of actions the user can take, such as the buttons of a toolbar. Browsers treat it like a ul; LUZ lays it out as a row.

<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>

Styled by elements/text.css, with no class.

A list where the order matters, such as steps or a ranking. A list with no class gets its markers back inside the box.

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

Styled by elements/text.css, with no class.

One paragraph of text. LUZ asks the browser to avoid leaving a single word alone on the last line.

<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>

Styled by elements/text.css, with no class.

Text shown exactly as typed, with every space and line break, in a fixed-width font. For code, add the .luz-code-block class and a code element.

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

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

Styled by elements/text.css, with no class.

A list where the order does not matter, such as features or ingredients. A list with no class gets its markers back inside the box.

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

Styled by elements/text.css, with no class.