Code Block

Inline <code> and block <pre> with a copy button. Uses the same styles as the Preview/Code tab (Demo) found throughout the docs — and works identically when used standalone.

Inline Code

Wrap inline tokens, class names, and paths in .code. For example: the radius token --r-lg or the component path app/design/components/button.

Block Code & Copy Button

Multi-line code renders in a <pre> block with a copy button in the top-right corner that copies the content to the clipboard — the label changes to "Copied" for 1.6 seconds after clicking.

<div class="banner banner-info">
  <Info class="banner-icon" />
  <span class="banner-text">The 2026 first-half education schedule is now available.</span>
  <button class="banner-action">Learn more</button>
</div>

Rules

Inline = .code (light gray background, r-xs). Block = .codeBlock (<pre><code>).
The copy button is fixed to the top-right of the block. Label reads Copy → Copied (1.6 s).
Colors and backgrounds follow tokens automatically — no separate dark mode overrides needed.