Code block

.talos-code is a framed code panel: a __bar carries the filename in the HUD display face, a __copy button sits at its right edge, and the __body is the monospaced <pre> below. The chrome is structural, not chromatic — the bar is the only thing that distinguishes it from a bare <pre>, so the panel reads as “this is a copyable artifact” before you read a single line.

Default

<Button variant=“ghost”>Engage</Button>

<div class="talos-code">
  <div class="talos-code__bar">
    <span>button.astro</span>
    <button class="talos-code__copy">copy</button>
  </div>
  <pre class="talos-code__body">&lt;Button variant="ghost"&gt;Engage&lt;/Button&gt;</pre>
</div>

__bar is uppercase display text on --talos-surface-2; __body is ui-monospace on --talos-surface-1 and scrolls horizontally on overflow rather than wrapping. The copy button is a static affordance — wire click to navigator.clipboard.writeText yourself.

Bar without copy

try_files $uri $uri/ =404;

<div class="talos-code">
  <div class="talos-code__bar"><span>nginx.conf</span></div>
  <pre class="talos-code__body">try_files $uri $uri/ =404;</pre>
</div>

The bar uses justify-content: space-between, so a lone label sits left and the copy button is purely optional. Drop __copy for read-only snippets.

Long line — horizontal scroll

ssh infrastructure.shelfwood.co “docker ps —format ’{{.Names}}’ | grep g53eqpbkjzqlilcfjx0jkw1z”

<pre class="talos-code__body">ssh host "docker ps --format '{{.Names}}' | grep …"</pre>

__body sets overflow-x: auto — long lines scroll within the panel instead of breaking the layout.

Inline code & kbd

The two inline siblings from the same CSS section. .talos-inline-code is a chip for code spans inside prose; .talos-kbd is a key cap with a 2px bottom edge.

<span class="talos-inline-code">bun run build</span>
<span class="talos-kbd">⌘</span><span class="talos-kbd">R</span>

Classes